Question

我想在表格的每一列上使用不同的样式。我已经读过你可以使用<colgroup>或<col>来做到这一点，但我没有运气。我有一个例子here，似乎没有任何改变。难道我做错了什么？这会在xhtml上运行吗？

我知道我可以在每个<td>上添加“class”属性，但这似乎很弱。

Answer 1

这是对的。虽然所有浏览器都支持colgroup，this isn't true for the attributes of the inner col element。在可能的属性中，所有浏览器仅支持width。但与CSS不同，<col width="">仅支持像素和百分比宽度。

不要使用它。而是创建CSS类并将它们分配给每个td。是的，很糟糕。

编辑更新了上面的链接以获得更好的信息

Answer 2

将table-layout设置为自动而非固定...

table {table-layout: auto;}

我的个人网站支持多个主题，我一直看到这些差异。

Answer 3

您可以使用css选择器来获得类似的结果，而无需添加额外的类。

例如，如果要为第二列指定特定样式，可以使用：

table>tbody>td:nth-child(2){font-weight: bolder;}

Answer 4

在2020年，如果要在列上使用不同的样式，则可以：
1. style / CSS ，但仅用于少数属性
2.在CSS中使用th / td：nth-child（#number）（我的首选解决方案，不知道colspans会怎样）
3.手动向th / td元素添加一个类

参考文献：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
https://www.w3.org/TR/CSS22/tables.html#columns

您不应使用“ width” HTML属性，而应使用样式/ CSS。在的样式/ CSS中，您应该仅使用“边框”，“背景”，“宽度”和“可见性”。您可以使用em来表达值。

我很困惑：w3说“'width'属性给出了列的最小宽度。”考虑到“最小宽度”属性的存在，这与我矛盾。在Firefox 72（Ubuntu）上

n == 23

设置“固定”宽度（如我所料）。如果我调整窗口大小，缩小窗口大小，则会调整列的大小，并将内容包装成更多行。

Answer 5

如果您确实需要使用无反应限制的cols标记，那么dangerouslySetInnerHTML会有所帮助：

<colgroup dangerouslySetInnerHTML={{
  __html: `
    <col style="background: red;"/>
    <col style="width: 20px;"/>
  `
}}/>

请注意，尽管此方法有效，但这不是推荐使用react的方法。

Answer 6

所以我也遇到了同样的问题...真正的问题是，即使使用CSS类而不是HTML属性，您仍然只能设置以下样式：

宽度
边界
背景色
可见度

来源： https://www.w3.org/TR/CSS21/tables.html#columns

Answer 7

这是我使用的技巧，实际上效果很好。在通用（站点范围内）css文件中，我放入了：

.mytable td:nth-child(1) { width: var(--w1);}
.mytable td:nth-child(2) { width: var(--w2);}
.mytable td:nth-child(3) { width: var(--w3);}
.mytable td:nth-child(4) { width: var(--w4);}

依此类推，直到我觉得我的网站上需要的任何表中的最大列数为止。

然后在每个表上，我都可以使用以下样式定义宽度：

<table class="mytable" id="tbl1" style="--w1: 30px; --w2: 100px; --w3: 80px;">

这使得设置列宽变得容易，而且我可以添加代码来调整列的大小，只需更改表上所需列的style属性即可。这样避免了每次我想为表定义列宽时都必须进行大量CCS条目的操作。要更改列宽，您可以使用以下内容：

document.getElementById("tbl1").style.setProperty("--w2", "123px");

以上只是通过更改--w2变量值来更改第2列的宽度。

HTML表格colgroup元素不起作用？

7 个答案: