正确。虽然colgroup本身被所有浏览器支持，但内部col元素的属性却不支持。在所有浏览器上，只有width支持可能的属性。但与CSS不同，<col width="">只支持像素和百分比宽度。
不要使用它，而是创建CSS类并将它们分配给每个td。是的，这很糟糕。

将您的table-layout设置为自动而不是固定...

table {table-layout: auto;}

我的个人网站支持多个主题，我看到这些类型的差异所有的时间。

下面是我使用的一个技巧，实际上效果很好。在一个通用的（站点范围内）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;">

这使得设置列宽变得很容易，而且我可以添加代码来调整列的大小，只需为所需的列更改表中的样式属性。这避免了每次我想定义表的列宽时都必须创建大量CCS条目。要更改列宽，可以使用如下代码：

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

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

您可以使用CSS选择器来获得类似的结果，而无需添加额外的类。
例如，如果要为第二列给予特定样式，可以用途：

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

在2020年，如果您希望柱具有不同的样式，可以：

1. style/CSS，但仅适用于少数属性
   2.在CSS中使用th/td：nth-child（#number）（我的首选解决方案，不知道colspan会发生什么）
   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属性，而应该使用style/CSS。在style/CSS中，你应该只使用“border”，“background”，“width”和“visibility”。你可以使用ems来表示值。
   我很困惑：w3说“'width'属性给出了列的最小宽度。”这在我看来是矛盾的，因为存在一个“min-width”属性。在Firefox 72（Ubuntu）上

<col style="width: 13em">

设置一个“固定”的宽度（正如我所期望的）。2如果我调整窗口的大小，缩小它，列的大小和内容被 Package 成更多的行。

所以我也遇到了同样的问题......真实的的问题是，即使在（而不是HTML属性）上使用了style/CSS，您仍然只能对以下内容设置样式：

• 宽度
• 边界
• 背景色
• 能见度
  **来源：**https：www.w3.org/TR/CSS21/tables.html#columns

如果你真的需要使用cols标签而不受React限制，那么dangerouslySetInnerHTML会有所帮助：

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

请注意，虽然这可以工作，但这不是使用React的推荐方式。

它是这样为我工作的colgroup和col

<colgroup  align="center">
    <col style="background-color:red">
    <col style="background-color:yellow">
    <col style="background-color:green">
</colgroup>