HTML表colgroup元素不工作?

没错。 While colgroup itself is supported by all browsers this isn't true for the attributes of the inner col element . 可能的属性,仅 width <col width=""> 仅支持像素和百分比宽度。

别用它。相反,创建CSS类并将它们分配给每个 td

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

table-layout 自动而不是固定。。。

table {table-layout: auto;}

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

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

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

.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列的宽度。

在2020年,如果希望列上有不同的样式,可以:
1style/CSS<col>,但仅适用于少数属性
2在CSS中使用th/td:nth child(#number)(我的首选解决方案,不知道colspan会发生什么)
三。手动将类添加到th/td元素

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

您不应该使用“width”HTML属性,而是使用style/CSS。在样式/CSS for<col>中,您应该只使用“border”、“background”、“width”和“visibility”。您可以使用ems来表示值。

我很困惑:w3说“width属性给出了列的最小宽度”,这在我看来是矛盾的,因为存在“minwidth”属性。在Firefox 72(Ubuntu)上

<col style="width: 13em">

所以我也有同样的问题。。。真正的问题是,即使style/CSS用于<col>(而不是HTML属性),您仍然只能设置以下内容的样式:

• 边框
• 背景色

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

dangerouslySetInnerHTML 将有助于:

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

请注意,虽然这样做有效,但这不是使用react的推荐方法。