css-only table manipulation

Question

I have a need to manipulate the layout of a table differently depending on certain conditions. I am not able to alter the HTML (with the exception of adding CSS class names) and I cannot use any Javascript. I must try and do everything using CSS only.

I have done almost everything except for one layout.

I need to turn a regular table row, such as the following...

+--------+--------+--------+--------+--------+--------+--------+
| CELL 1 | CELL 2 | CELL 3 | CELL 4 | CELL 5 | CELL 6 | CELL 7 |
+--------+--------+--------+--------+--------+--------+--------+

... into a multiple rowed table, with the 2nd and further rows containing only one 100% width cell

+--------+--------+--------+--------+
| CELL 1 | CELL 2 | CELL 3 | CELL 4 |
+--------+--------+--------+--------+
|               CELL 5              |
+-----------------------------------+
|               CELL 6              |
+-----------------------------------+
|               CELL 7              |
+-----------------------------------+

Is this possible?

Answer 1

Yes it is possible, and with pure CSS:

tr {
    display: block;
    width: 500px;
}
td {
    display: block;
    width: 100%;
}
td:nth-child(-n+4) {
    float: left;
    width: 25%;
}

Also, check this demo