Colspan/Rowspan pour les éléments dont l'affichage est défini sur table-cell

Question

J'ai le code suivant :

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan2 {
        /* What to do here? */
    }
</style>

C'est assez simple. Comment puis-je ajouter un colspan (ou l'équivalent de colspan) pour les éléments dont le nom est display: table-cell ?

Answer 1

Pour autant que je sache, l'absence de colspan/rowspan n'est qu'une des limitations de l'application display:table . Voir ce billet :

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

Answer 2

Puisque l'OP ne explicitement Je vais donc m'entêter et proposer la solution que j'ai trouvée aujourd'hui, d'autant plus qu'elle est beaucoup plus élégante que d'avoir un tableau dans un tableau.

L'exemple est égal à <table> avec deux cellules par ligne et deux rangées, où la cellule de la deuxième rangée est un td avec colspan="2" .

Je l'ai testé avec Iceweasel 20, Firefox 23 et IE 10.

div.table {
  display: table;
  width: 100px;
  background-color: lightblue;
  border-collapse: collapse;
  border: 1px solid red;
}

div.row {
  display: table-row;
}

div.cell {
  display: table-cell;
  border: 1px solid red;
}

div.colspan,
div.colspan+div.cell {
  border: 0;
}

div.colspan>div {
  width: 1px;
}

div.colspan>div>div {
  position: relative;
  width: 99px;
  overflow: hidden;
}

<div class="table">
    <div class="row">
        <div class="cell">cell 1</div>
        <div class="cell">cell 2</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div><div>
                cell 3
            </div></div>
        </div>
        <div class="cell"></div>
    </div>
</div>

Action en direct (démo) aquí .

EDIT : J'ai affiné le code pour qu'il soit plus facile à imprimer, car les couleurs d'arrière-plan sont omises par défaut. J'ai également créé rowspan-demo inspiré par la réponse tardive ici.

Answer 3

Une solution plus simple qui fonctionne pour moi dans Chrome 30 :

Colspan peut être émulé en utilisant display: table au lieu de display: table-row pour les rangs :

.table {
    display: block;
}
.row {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
}
.row.colspan2 {/* You'll have to add the 'colspan2' class to the row, and remove the unused <div class=cell> inside it */
    display: block;
}

Le seul inconvénient est que les cellules des rangées empilées ne seront pas alignées verticalement, car elles proviennent de tableaux différents.

Answer 4

Il suffit d'utiliser un table .

Les tables ne sont désapprouvées que lorsqu'elles sont utilisées à des fins de mise en page.

Cela ressemble à des données tabulaires (rangées/colonnes de données). Par conséquent, je recommanderais d'utiliser un table .

Voir ma réponse à cette question pour plus d'informations :

créer la même chose avec des divs comme tableaux

Answer 5

Vous devez créer un div's vide pour simuler un colspan :

Dans le cas où vous n'utilisez pas la largeur :

<div class="row">
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
</div>
<div class="row">
    <div class="cell">Cell</div>
    <div class="cell">&nbsp</div>
</div>

Dans le cas où vous utilisez la largeur :

<div class="row">
    <div class="cell" style="width:25%">Cell</div>
    <div class="cell" style="width:25%">Cell</div>
    <div class="cell" style="width:25%">Cell</div>
    <div class="cell" style="width:25%">Cell</div>
</div>
<div class="row">
    <div class="cell" style="width:25%">Cell</div>
    <div class="cell" style="width:75%">&nbsp</div>
</div>