仅限css表操作

Question

我需要根据特定条件以不同方式操纵表的布局.我无法改变HTML(除了添加CSS类名),我不能使用任何Javascript.我必须尝试使用​​CSS做所有事情.

除了一个布局,我几乎做了所有事情.

我需要转一个常规表行,如下所示......

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

...进入多行表,第二行和更多行只包含一个100%宽度的单元格

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

这可能吗？

Answer 1

是的,这是可能的,并使用纯CSS:

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

另外,请查看此演示