CSS - 是否可以强制占用整行？

Question

这是非常规的，但这是重写HTML页面或在CSS中找到一种方法之间的选择。我希望<th>占用整行，强制跟随它的<td>位于下一行（因此<th></th> <td></td>变为单列而不是两列）。

我尝试过显示：阻止，但这似乎没有削减它。我该怎么办？

Answer 1

我认为这是不可能的，因为rowspan和colspan没有CSS等价物。

使用:after伪类无法完成，因为您无法以这种方式添加标记，只能添加节点内容。 （右？）

想到的唯一想法是，如果第一列有一个类名，你可以尝试

th { display: none }
th.firstcolumn { display: table-cell }

看看会发生什么。但是，我认为这将不导致th分散到每一列，只是隐藏其他列。

哦和非常讨厌的想法，有点像

th { display: none }
th.firstcolumn { position: absolute; display: block; left: 0px; right: 0px; }

但在你诉诸之前，你可能想要重写HTML。

Answer 2

据我所知，目前没有css属性允许你设置表格单元格属性，例如colspan。

我只是在您的IDE中进行搜索/替换，将<th>标记替换为<th colspan="2">

只需几秒钟即可完成。

基于OP的编辑：

我会尝试用</th>替换</th></tr><tr>的每一次出现，这样你就会得到所需的背对背分裂效果。

Answer 3

如果标题单元格上有id，则可以使用脚本执行此操作。

var header = document.getElementById("header_cell_id");
header.colSpan = "2";

我一直在用jQuery（这会更好）尝试这个，但它似乎没有因某些原因而起作用：

$("th").attr("colspan", "2");

Answer 4

不可能 - 而且，我冒昧，不应该成为可能。您应该正确使用HTML。听起来您的<th>应该有scope属性，表明它是哪个单元格。