Maysam Maysam - 20 days ago 9
CSS Question

Split table row into two rows

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

It's what I want:


my table

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, http://www.getuikit.com/docs/table.html .

Answer

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