HTML表格的colgroup元素无法正常工作。

Question

我想在表格的每一列上使用不同的样式。我读过可以通过使用<colgroup>或<col>来实现，但是我没有成功。我有一个示例here，但似乎没有任何变化。我做错了什么吗？这在XHTML上能行吗？

我知道我可以在每个<td>上添加"class"属性，但那似乎不够好。

- pleasedontbelong

Answer 1

没错。虽然所有浏览器都支持 colgroup 标签, 但对于内部 col 元素的属性并不是如此。在可能的属性中，只有 width 在所有浏览器上都被支持。但与 CSS 不同，<col width=""> 只支持像素和百分比宽度。

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

- Aaron Digulla

---

您所提到的页面中写道：“<colgroup>标签受到所有主要浏览器的支持。”也许您应该删除这个引用，因为它会给人们带来错误的信息。 - Jannie Theunissen

虽然所有主要浏览器都支持element，但并非所有地方都支持attributes。在您提供的第一个链接中，它说更好的方法是将类名应用于相应的colgroup元素，然后让CSS样式处理对齐、颜色、宽度等问题。 - Aaron Digulla

我给这个点踩了，因为它没有解释为什么不使用colgroup宽度。对于我动态设置列宽非常有效，当您有colspans（合并单元格）时，尝试自己动态设置正确的宽度是一场噩梦。 - pilavdzice

@pilavdzice：我同意使用 colspan。我的建议是针对静态布局。当您有 JavaScript 来计算像素宽度时，col 再次变得更加有用。 - Aaron Digulla

被接受的答案中的参考链接（sitepoint.com和about.com）现在都已失效，但该答案仍然有一定的用处。 - White_Rabbit

Answer 2

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

table {table-layout: auto;}

我的个人网站支持多种主题，而且我经常看到这些差异。

- John

---

太棒了！ :) https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout - Volker E.

Answer 3

这里有一个我用过的技巧，非常有效。在通用的（全站）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 变量的值来改变第二列的宽度。

- Mike in Canada

Answer 4

在2020年，如果您想在列上使用不同的样式，您可以：
1. 使用style/CSS <col>，但只适用于少量属性
2. 在CSS中使用th/td:nth-child(#number)（我偏爱的解决方案，不清楚跨列时会发生什么）
3. 手动向th/td元素添加类。

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

你不应该使用“width”HTML属性，而是使用style/CSS。在<col>的style/CSS中，你只应该使用“border”，“background”，“width”和“visibility”。你可以使用ems来表示值。

我感到困惑：w3说：“'width'属性为列指定最小宽度。”这对我来说看起来是矛盾的，因为已经存在一个“min-width”属性。在Firefox 72（Ubuntu）上。

<col style="width: 13em">

设置了一个“固定”的宽度（正如我所预期的）。如果我调整窗口大小，缩小它，列会被重新调整大小，内容则会被换行成更多行。

- White_Rabbit

Answer 5

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

例如，如果您想要为第二列提供特定的样式，可以使用以下代码：

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

- ramjamx

Answer 6

所以我刚刚遇到了同样的问题......真正的问题是，即使在 <col> 上使用了样式/CSS（而不是HTML属性），你仍然只能为以下内容设置样式：

• 宽度
• 边框
• 背景颜色
• 可见性

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

- Rob Kovacs

Answer 7

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

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

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

- gsouf

Answer 8

使用 colgroup 和 col，我已经成功实现了这个功能。

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

- Ninad Pingale