Split table row into two rows

Question

Is there any way to split a table row into two rows instead of using nested tables?

It's what I want:

td #4 should has full width and I don't know is there any CSS trick or anything to do this or not.

NOTE: I do not want to use another <tr> with colspan. I want it inside the same row within other <td>s, because I'm using striped table.

Answer 1

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 the div as well, which I will prefer more over here, with a self clearing class but I used display: table-cell; so it will retain the properties like vertical-align: middle; which you may need as you are using table

---

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 and width attributes here just for demonstration purpose, consider declaring a class and style it using CSS

Answer 2

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