Different number of columns for each row

debugcn Published at Dev

Davide R.

I'm not using the tag, so I can't use the colspan attribute.

I'd like to create a table with three cells in the first row, one cell in the last row and two cells in the other rows.

Here's my code (minimal):

.row {
    display: table-row;
}
.cell {
    display: table-cell;
}

HTML:

<div style="display: table;">
     <div class="row" style="width: 100%;">
            <div class="cell" style="width: 33% !important;">
                aaaa
            </div>
            <div class="cell" style="width: 33% !important;">
                bbbbb
            </div>
            <div class="cell" style="width: 33% !important;">
                ccccc
            </div>
      </div>
      <div class="row" style="width: 100%;">
            <div class="cell" style="width: 50% !important;">
                ddddd
            </div>
            <div class="cell" style="width: 50% !important;">
                eeeee
            </div>
      </div>
      <div class="row" style="width: 100%;">
            <div class="cell" style="width: 50% !important;">
                fffff
            </div>
            <div class="cell" style="width: 50% !important;">
                ggggg
            </div>
      </div>
      <div class="row" style="width: 100%;">
            <div class="cell" style="width: 100% !important;">
                last cell
            </div>
      </div>
</div>

And this is what I get (I can't post images): http://gyazo.com/cc036ed406f6c1a166955522d40e05b0.png

Marc Audet

I would build this layout as follows.

For the HTML:

<div class="parent">
     <div class="row r3">
            <div class="cell">aaaa</div>
            <div class="cell">bbbbb</div>
            <div class="cell">ccccc</div>
      </div>
      <div class="row r2">
            <div class="cell">ddddd</div>
            <div class="cell">eeeee</div>
      </div>
      <div class="row r2">
            <div class="cell">fffff</div>
            <div class="cell">ggggg</div>
      </div>
      <div class="row r1">
            <div class="cell">last cell</div>
      </div>
</div>

and apply the following CSS:

.row {
    display: table;
    border: 1px dashed blue;
    width: 100%
}
.cell {
    display: table-cell;
    border: 1px dotted blue;
}
.r3 .cell {
    width: 33.333333%;
}
.r2 .cell {
    width: 50%;
}
.r1 .cell {
    width: 100%;
}

Use display: table for each div.row block element with 100% width.

You don't need to explicitly define a CSS table row, one will be created anonymously as needed.

See reference: http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes

See demo: http://jsfiddle.net/audetwebdesign/72yb5th2/

Collected from the Internet

Please contact [email protected] to delete if infringement.