Colspan/Rowspan for elements whose display is set to table-cell

Question

As far as I know, the lack of colspan/rowspan is just one of the limitations of display:table. See this post:

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

Since OP does not explicitly rule that solution must be pure CSS, I'll be stubborn and throw in my workaround I figured out today, especially since it's much more elegant than having a table inside a table.

Example equals to <table> with two cells per row and two rows, where the cell in the second row is a td with colspan="2".

I have tested this with Iceweasel 20, Firefox 23 and 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>

Live action (demo) here.

EDIT: I finetuned the code to be more printer-friendly, as they leave background-colors out by default. I also created rowspan-demo, inspired by late answer here.

A simpler solution that works for me in Chrome 30 :

Colspan can be emulated by using display: table instead of display: table-row for the rows :

.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;
}

The only pitfall is that the cells of stacked rows won't align vertically, as they're from different tables.

If you're looking for a straight CSS way to simulate a colspan, you could use display: table-caption.

.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #000;
}
.colspan2 {
  /* What to do here? */
  display: table-caption;
}

<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>

Simply use a table.

table's are only frowned upon when being used for layout purposes.

This seems like tabular data (rows/columns of data). Therefore I would recommend using a table.

See my answer to this question for more information:

creating the same thing with divs as tables

Here's one way to span columns in CSS I used for my own situation.

https://jsfiddle.net/mb8npttu/

.table {
  display: table;
}

.row {
  display: table-row;
}

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

.colspan {
  max-width: 1px;
  overflow: visible;
}

<div class='table'>
  <div class='row'>
    <div class='cell colspan'>
      spanning
    </div>
    <div class='cell'></div>
    <div class='cell'></div>
  </div>

  <div class='row'>
    <div class='cell'>1</div>
    <div class='cell'>2</div>
    <div class='cell'>3</div>
  </div>
</div>