Qu'est-ce que l'analogue de colspan quand utiliser display: table; dans le CSS?

La tâche est assez étrange. J'ai créer la table html MAIS je ne suis pas autorisé à utiliser les <table> tag. Mon tableau devrait ressembler à ceci: Qu'est-ce que l'analogue de colspan quand utiliser display: table; dans le CSS?

Il serait facile de faire comme ci-dessous:

<table>
     <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
     </tr>
     <tr>
         <td colspan="5"></td>
     </tr>
     ...

mais, comme je l'ai dit, je ne suis pas autorisé à utiliser les balises de tableau (table, tr, td, th). Voici JSFIddle de ce que j'ai en ce moment. Comment puis-je obtenir le même résultat qu'avec <td colspan="5"></td> mais en utilisant uniquement des balises div et CSS.

MODIFICATIONS:
* Cellule de la Table de la largeur d'une ligne ne doit pas être fixe, il doit être dynamique, et il devrait être possible de les faire (les cellules) largeur différente (en une ligne).
* Cellule de la Table de la largeur d' différentes lignes de la même colonne doit être l'égalité des. Comme dans la table traditionnelle. Seulement "colspanned" de la cellule de largeur doit être différent.

Double Possible de Colspan/Rowspan pour les éléments dont l'affichage est mis à table-cell

OriginalL'auteur Dmytro | 2013-03-19

4

Comme indiqué dans la spécification CSS 2.1 dans le cadre "17.5 présentation Visuelle du contenu de la table"

Cellules peuvent s'étendre sur plusieurs lignes ou colonnes. (Bien que le CSS 2.1 ne définit pas la façon dont le nombre de fractionné lignes ou de colonnes est déterminé ...

Donc la réponse est facile! Ne pensez pas à des règles css exactement le même que les tableaux html. Comme il y a quelques différences comme de ce qui est mentionné dans "17.2.1 Anonyme des objets de la table":

... les "disparus" éléments doivent être prises en charge dans l'ordre pour le modèle de table de travail. Tout élément de la table va automatiquement générer nécessaire anonyme des objets de la table autour de lui-même, composé d'au moins trois objets imbriqués correspondant à un 'tableau'/'inline-table' élément 'table-row' élément, et un 'table-cell' élément. ...

De sorte que vous pouvez le faire de cette façon (de chaque ligne de la table et de la suppression d'une table-row pour éviter l'inutile bloc div) jusqu'à ce qu'ils spécifiez une méthode pour définir le nombre de fractionné des lignes ou des colonnes:

CSS
```
.row {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
    width: 16.67%;
}
.wideCell {
    display: table-cell;
}
```
HTML
```
<div class="row">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
    <div class="cell">Four</div>
    <div class="cell">Five</div>
    <div class="wideCell">Six</div>
</div>
<div>One Two Three Four Five Six</div>
<div class="row">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
    <div class="cell">Four</div>
    <div class="cell">Five</div>
    <div class="wideCell">Six</div>
</div>
```
Intelligent. Ce doit être marqué comme réponse correcte à mon humble avis.
Le problème avec cette solution est que vous perdez un élément clé de tables ce qui est de la synchronisation des largeurs de toutes les cellules de la même colonne. cela pourrait être contourné par le réglage des largeurs fixes sur les cellules, mais qui n'est pas toujours souhaitable
Violon illustrant @PhilipGuerrant point: jsfiddle.net/tmux06tu

OriginalL'auteur Mohsenme
1

Vous devez utiliser les CSS float et width pour obtenir la table-comme l'effet que vous recherchez. Ce que je suis fondamentalement en train de faire est je suis en plaçant 5 divs le tout avec une largeur fixe et un nom de classe, et flottant à gauche. Le wideCell a la même width la .wrapper qui tient juste tous ensemble dans un joli bloc.

HTML
```
<div class="wrapper">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="wideCell"></div>
</div>
```
CSS
```
.wrapper {
    width:510px;
}
.cell {
    width:100px;
    height:50px;
    background-color:#ff0000;
    float:left;
    border:1px #000 solid;
}
.wideCell {
    width:508px;
    height:50px;
    background-color:#ff0000;
    float:left;
    border:1px #000 solid;
}
```
DÉMO

Merci pour l'aide, mais ce n'est pas tout à fait ce que je suis de verrouillage. Voir mes modifications.
changement width à min-width
Heres un jsfiddle avec le code mis à jour, vous pouvez avoir différentes largeurs jsfiddle.net/L7Fp9/6
pourquoi voudriez-vous d'utiliser float ou la largeur ? cochez cette jsfiddle.net/xVTkP
en raison de l'effet dont il a besoin.

OriginalL'auteur chriz

MODIFIER

CSS

.table{
        width: 100%;
    }
    .table .row{
        width: 100%;
        height: 25px;
        margin: 0px;
        padding: 0px;
    }
    .table .row .cell{
        width: 150px;
        float: left;
        border: solid 1px #CCC;
        height: 25px;
    }
    .table .clear_float{
        clear: both;
    }
    .table .row .cell.rowspan{
        width: 759px;
        border: solid 1px #CCC;
    }

html

<div class="table">
    <div class="row">
        <div class="cell">One</div>
        <div class="cell">Two</div>
        <div class="cell">Three</div>
        <div class="cell">Four</div>
        <div class="cell">Five</div>
    </div>
    <div class="clear_float" />
    <div class="row">
        <div class="cell rowspan">
            One Two Three Four Five
        </div>
    </div>
    <div class="clear_float" />
    <div class="row">
        <div class="cell">One</div>
        <div class="cell">Two</div>
        <div class="cell">Three</div>
        <div class="cell">Four</div>
        <div class="cell">Five</div>
    </div>
    <div class="clear_float" />
    <div class="row">
        <div class="cell rowspan">
            One Two Three Four Five
        </div>
    </div>
    <div class="clear_float" />
    <div class="row">
        <div class="cell">One</div>
        <div class="cell">Two</div>
        <div class="cell">Three</div>
        <div class="cell">Four</div>
        <div class="cell">Five</div>
    </div>
    <div class="clear_float" />
    <div class="row">
        <div class="cell rowspan">
            One Two Three Four Five
        </div>
    </div>
</div>

Non, cela ne fonctionne pas... Mais merci pour essayer d'aider...
Veuillez vérifier édité répondre

OriginalL'auteur Miqdad Ali

Vérifier ce violon en sortir, j'ai espoir qui suffirait à ce que vous avez besoin
les tableaux html

CSS

div.table {border: 1px solid black; display: table; }
div.tr {border: 1px solid black; display: table-row; }
div.td {border: 1px solid black; display: table-cell; }

Html

<div class="table">
<div class="tr">
<div class="td">Row 1, Cell 1</div>
<div class="td">Row 1, Cell 2</div>
<div class="td">Row 1, Cell 3</div>
</div>
<div class="tr">
<div class="td">Row 2, Cell 1</div>
<div class="td">Row 2, Cell 2</div>
<div class="td">Row 2, Cell 3</div>
</div>

Je ne pense pas que vous même lire l'OP complet de la question...

OriginalL'auteur inputError

J'ai beaucoup cherché il n'y a rien comme colspan en display:table de CSS.
Vous pouvez essayer ceci: CSS display:table

 <div style="display:table;">
     <div style="display:table-row;">
         <span style="display:table-cell;">Name</span>
         <span style="display:table-cell;"><input type="text"/></span>
     </div>
     <div style="display:table-row;">
         <span style="display:table-cell;">E-Mail</span>
         <span style="display:table-cell;"><input type="text"/></span>
     </div>
     <div style="display:table-row;">
         <span style="display:table-cell;">Password</span>
         <span style="display:table-cell;"><input type="text"/></span>
     </div>
 </div>

 <div style="display:table;">
     <div style="display:table-row; " >
         <span style="display:table-cell;">
             <button>Send Message</button>
         </span>
     </div>                            
  </div>

OriginalL'auteur Kedar.Aitawdekar

Vous pouvez le faire ( où les données-x est l'affichage approprié:xxxx ):

<!-- TH -->
<div data-tr>
<div data-th style="width:25%">TH</div>
<div data-th style="width:50%">
<div data-table style="width:100%">
<div data-tr>
<div data-th style="width:25%">TH</div>
<div data-th style="width:25%">TH</div>
<div data-th style="width:25%">TH</div>
<div data-th style="width:25%">TH</div>
</div>
</div>
</div>
<div data-th style="width:25%">TH</div>
</div>
<!-- TD -->
<div data-tr>
<div data-td style="width:25%">TD</div>
<div data-th style="width:50%">
<div data-table style="width:100%">
<div data-tr>
<div data-td style="width:25%">TD</div>
<div data-td style="width:25%">TD</div>
<div data-td style="width:25%">TD</div>
<div data-td style="width:25%">TD</div>
</div>
<div data-tr>
...
</div>
</div>
</div>
<div data-td style="width:25%">TD</div>
</div>

OriginalL'auteur ucsarge

Vous devez vous connecter pour publier un commentaire.