Maysam Maysam - 2 months ago 22
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
. I want it inside the same row within other
s, because I'm using striped table, .


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;


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?


<table border="1" width="100%">
        <td colspan="2">Merged</td>

Note: Am using border and width attributes here just for demonstration purpose, consider declaring a class and style it using CSS