css中的colspan等价物？ [复制]答案

【问题标题】：colspan equalent in css? [duplicate]css中的colspan等价物？ [复制]
【发布时间】：2014-06-29 20:37:39
【问题描述】：

表格的第一行如下所示：

....

<tr>
   <th colspan="2">Add a category</th>
</tr>

...

它正确呈现。但是我希望它没有 colspan 属性，而是用 CSS 设置样式。而这样做的原因是因为有很多类似的表，所以不需要一遍又一遍地定义属性（只是遵循DRY原则）

我只是希望它是：

<tr>
   <th>Add a category</th>
</tr>

// CSS
table th:first-child {
    /* Pseudo attr */
    colspan : 2px;
}

我尝试过使用float、padding 和width，但没有成功。有没有办法在纯 CSS 中做到这一点？

【问题讨论】：

注意问题中的标记是无效的；显然tr 和th 里面的意思。根据 HTML 规范，这是不够的，因为 th 是同一列或同一行中的单元格的标题，而不是其后面的行；应该使用td。并且应该使用colspan HTML 属性，因为这是关于表格的结构（一个单元格跨越多个插槽）。

标签： html css

【解决方案1】：

据我所知，纯 CSS 无法做到这一点，因为 colspan 确实是布局多于样式。

根据this的说法，过去的一些浏览器似乎支持它，但现在似乎真的不推荐和不支持了。

【讨论】：

【解决方案2】：

这个问题有很多答案：例如，您可以查看here 描述的解决方案。它涉及使用 column-span css 属性，但如前所述，它不适用于旧浏览器。

column-span: 4; /* W3C */
-webkit-column-span: 4; /* Safari & Chrome */
-moz-column-span: 4; /* Firefox */
-ms-column-span: 4; /* Internet Explorer */
-o-column-span: 4; /* Opera */

Here你可以找到关于这一点的讨论。我同意 colspan 的结构多于外观，因此应该保留在 HTML 中的观点，但这是个人意见。如果您愿意，可以在同一线程上找到使用 div 的解决方案。

【讨论】：

在示例案例中这些设置是什么，它们将如何解决问题？
此属性超出了表格的范围，因为它旨在与列布局一起使用：w3schools.com/cssref/css3_pr_column-span.asp
该“答案”的结尾说“但是，这仅适用于当前一代的浏览器。我建议不要在 CSS 中设置 colspan，但您可以选择。”