Split table row into two rows
As you updated your question, another way you can do is to use nested div
elements, with display: table-cell;
properties
.top_row {
display: table;
width: 100%;
}
.top_row > div {
display: table-cell;
width: 50%;
border-bottom: 1px solid #eee;
}
Demo
Note: Yes, you can
float
thediv
as well, which I will prefer more over here, with a self clearingclass
but I useddisplay: table-cell;
so it will retain the properties likevertical-align: middle;
which you may need as you are usingtable
Why not use colspan
for this?
Demo
<table border="1" width="100%">
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td colspan="2">Merged</td>
</tr>
</table>
Note: Am using
border
andwidth
attributes here just for demonstration purpose, consider declaring aclass
and style it using CSS
you may want to check at this code:
http://jsfiddle.net/rg0dk576/
HTML
<table class='normal' border="1" width="100%">
<caption> This is a normal table look&feel </caption>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
</table>
<br>
<table class='multirow' border="1" width="100%">
<caption> This is the same table with rows splitted into multiple rows, only by using CSS </caption>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr>
</table>
CSS
* { box-sizing:border-box; }
td:nth-child(even) { background-color: #0000AA22; }
tr:nth-child(even) { background-color: lightgreen; }
.multirow td { display: inline-block !important; width: auto; border: 1px solid #eee; }
.multirow td:nth-child(1),
.multirow td:nth-child(2),
.multirow td:nth-child(3) { width: 33%; }
.multirow td:nth-child(4) { width: 100%; }
.multirow td:nth-child(5),
.multirow td:nth-child(6) { width: 50%; }