What is the analog of colspan when use display: table; in CSS? - html

Question

The task is pretty strange. I have to create html table BUT I'm not allowed to use traditional <table> tag. My table should look like this:
It would be easy to do it like below:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5"></td>
</tr>
...
but, as I said, I'm not allowed to use traditional table tags (table, tr, td, th). Here is JSFIddle of what I have at the moment. How can I get the same result as with <td colspan="5"></td> but using only divs and CSS.
EDITS:
* Table cell's width in one row must not be fixed, it should be dynamic and it should be possible to make them (cells) different width (in one row).
* Table cell's width in different rows of the same column must be equal. Like in traditional table. Only "colspanned" cell's width must be different.

Answer 1

As stated in CSS 2.1 specification in part "17.5 Visual layout of table contents"
Cells may span several rows or columns. (Although CSS 2.1 does not define how the number of spanned rows or columns is determined ...
So the answer is easy! Don't think of CSS tables exactly the same as HTML tables. As there are some differences like what mentioned in "17.2.1 Anonymous table objects":
... the "missing" elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element. ...
So you can do it this way (each row as a table and dropped table-row for avoiding unnecessary div block) until they specify a way for defining number of spanned rows or columns:
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>

Answer 2

You need to use CSS float and width to get the table-like effect you're looking for. What I'm basically doing is I'm placing 5 divs all with a fixed width and class name, and floating them to the left. The wideCell has the same width the .wrapper which just holds them all together in a nice block.
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;
}
DEMO

Answer 3

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

Answer 4

I have searched a lot there is nothing like colspan in display:table CSS.
You can try this: 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>

Answer 5

You can do this ( where data-x has the appropriate display:xxxx set ):
<!-- 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>

Answer 6

Check this fiddle out i hope that would suffice what you need
html tables
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>