HTML 表格 colgroup 元素不起作用？

HTML table colgroup element not working?

提问by pleasedontbelong

I want different styles on each column of a table. I've read that you could do that by using <colgroup>or <col>, but I had no luck. I have an example here, and nothing seems to change. Am I doing something wrong? Will this work on xhtml?

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

I know I could add a "class" attribute on each <td>, but that seems weak.

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

回答by Aaron Digulla

That's correct. While colgroupitself is supported by all browsers, this isn't true for the attributes of the inner colelement. Of possible attributes, only widthis supported on all browsers. But unlike CSS, <col width="">only supports pixel and percentage widths.

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

Don't use it. Instead, create CSS classes and assign them to each td. Yes, it sucks.

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

EDITUpdated link above to page with better information

编辑更新了上面的链接到具有更好信息的页面

回答by John

Set your table-layoutto auto instead of fixed...

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

table {table-layout: auto;}

My personal site supports multiple themes and I see these kinds of differences all the time.

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

回答by ramjamx

You could use css selectors to get similar results without adding extra classes.

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

As an example if you want to give specific style to a second column you can use:

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

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

回答by Rob Kovacs

So I just had this same issue... the real problem is that even when style/CSS is used on <col> (rather than HTML attributes), you can still only style the following things:

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

• width
• borders
• background colors
• visibility

• 宽度
• 边界
• 背景颜色
• 能见度

Source:https://www.w3.org/TR/CSS21/tables.html#columns

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

回答by White_Rabbit

In 2020, if you want different styles on columns, you can:
1. style/CSS <col>, but for only a few properties
2. use th/td:nth-child(#number) in CSS (my preferred solution, no idea about what happens with colspans)
3. manually add a class to the th/td elements

2020 年，如果你想要不同的列样式，你可以：
1. style/CSS <col>，但只有少数属性
2. 在 CSS 中使用 th/td:nth-child(#number)（我的首选解决方案，不知道 colspans 会发生什么）
3. 手动向 th/td 元素添加一个类

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

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

You're not supposed to use the "width" HTML attribute, instead use style/CSS. In the style/CSS for <col> you're supposed to use only "border", "background", "width" and "visibility". You can use ems to express values.

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

I'm confused: w3 says "The 'width' property gives the minimum width for the column." which looks contradictory to me, given the existence of a "min-width" property. On Firefox 72 (Ubuntu)

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

<col style="width: 13em">

sets a "fixed" width (as I expected). If I resize the window, narrowing it, the column is resized and the content is wrapped into more lines.

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

回答by Soufiane Ghzal

If you really need to use cols tags without react restriction then dangerouslySetInnerHTMLwill help:

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

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

Note that while this works this is not the recommended way to work with react.

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