HTML 表格 colgroup 元素不起作用？答案

【问题标题】：HTML table colgroup element not working?HTML 表格 colgroup 元素不起作用？
【发布时间】：2011-04-09 04:35:42
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

没错。 While colgroup itself is supported by all browsers，this isn't true for the attributes of the inner col element。在可能的属性中，所有浏览器仅支持width。但与 CSS 不同的是，<col width=""> 仅支持像素和百分比宽度。

不要使用它。相反，创建 CSS 类并将它们分配给每个 td。是的，很烂。

编辑更新了上面的链接以提供更好的信息

【讨论】：

谢谢！似乎 html5 将使 colgroup 工作.. 但在那之前，我将使用类或 nth-child
你引用的页面说所有主流浏览器都支持标签也许你应该删除引用，因为它们误导了人们。
我同意@JannieT，这似乎得到了所有主流浏览器的支持。请参阅：reference.sitepoint.com/html/colgroup 和 webdesign.about.com/od/htmltags/p/bltags_colgroup.htm
@MichaelLaVoie：虽然所有主流浏览器都支持 element，但并非所有地方都支持 attributes。在您的第一个链接上，它说 更好的方法是将类名应用到各个 colgroup 元素，然后让 CSS 样式处理对齐、颜色、宽度等。
@JannieT：属性中，只有width是所有浏览器都支持的，甚至是非常有限的：它只允许一个数字（像素宽度）或百分比。

【解决方案2】：

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

table {table-layout: auto;}

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

【讨论】：

神奇的财产！ :) developer.mozilla.org/en-US/docs/Web/CSS/table-layout

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

如果你真的需要在没有反应限制的情况下使用 cols 标签，那么dangerouslySetInnerHTML 会有所帮助：

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

请注意，虽然这可行，但这不是使用 react 的推荐方式。

【讨论】：

【解决方案5】：

所以我也遇到了同样的问题...真正的问题是即使在

上使用样式/CSS（而不是 HTML 属性），您仍然只能设置以下样式：

宽度
边界
背景颜色
可见性

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

【讨论】：

【解决方案6】：

在 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

您不应该使用“宽度”HTML 属性，而是使用样式/CSS。在

的样式/CSS 中，你应该只使用“border”、“background”、“width”和“visibility”。您可以使用 em 来表达值。

我很困惑：w3 说“'width' 属性给出了列的最小宽度。”考虑到“最小宽度”属性的存在，这对我来说似乎是矛盾的。在 Firefox 72 (Ubuntu) 上

<col style="width: 13em">

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

【讨论】：

【解决方案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;">

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

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

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

【讨论】：