HTML 表格：是否有指定列宽的好习惯？ [关闭]答案

【问题标题】：HTML Tables: Is there a good practice for specifying column widths? [closed]HTML 表格：是否有指定列宽的好习惯？ [关闭]
【发布时间】：2014-07-18 18:55:33
【问题描述】：

我想调整一些表格，以便尽可能地展示我的界面。有没有一种好的做法来指定表格列的宽度？（例如，如果我想将第一列显示为 100px 宽，第二列显示为 80px 宽，第三列显示为 60px 宽。）

我查看了HTML Table column width practices，但是选择的答案（虽然对提出问题的用户有用）没有描述如何做到这一点。

该问题的另一个答案建议使用 <col> 为每一列分配一个类，然后确定 CSS 中的宽度。然而，这似乎不雅，评论者建议<col> 标签存在问题。另外，我相信它在 HTML5 中已被弃用？

HTML

<table>
    <col class=width100>
    <col class=width80>
    <col class=width60> 
    <tr>
        <th>Column 1</th> 
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</table>

CSS

width100 {
    width: 100px; 
}

width80 {
    width: 80px; 
}

width60 {
    width: 60px; 
}

这似乎相当不雅，我不确定<col> 标签的可靠性/弃用。有没有更好的办法？

【问题讨论】：

为什么不直接把课程放到单元格上呢？
虽然我可以对第一行单元格执行此操作，但我不确定这样做是否是一个可取的解决方案。我什至不确定给<col>s 或<th>s 提供width100 等课程是否是一种好习惯。有几种方法可以解决（虽然，很抱歉，我应该在第一个示例之外将其作为替代方案）但是如果可能的话，我想找到一个很好的解决方案。

标签： html css

【解决方案1】：

为避免在每个 td 元素中重复该类，您可以尝试使用伪类来选择表中的第 n 个 td。

类似这样的：

td:nth-child(1){
    color: red;
    width: 100px;
}
td:nth-child(2) {
    color: blue;
    width: 80px;
}
td:nth-child(3) {
    color: green;
    width: 60px;
}

覆盖表格标题单元格：

th:nth-child(1){
    color: red;
    width: 100px;
}
th:nth-child(2) {
    color: blue;
    width: 80px;
}
th:nth-child(3) {
    color: green;
    width: 60px;
}

更多关于:nth-child（和伪类）的信息在这里：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

【讨论】：

干杯！我使用伪类来完成典型的交替行背景颜色技巧，但我没有想到要这样做。不过，有一个问题 - 并非我的所有表格的顶部都是一行 <th>s。有些只是<th><td><th><td> 等的一排 - 我将如何解释这一点？谢谢！
我刚刚添加了一组 th 样式，它似乎工作。不过我还没有进行适当的跨浏览器测试，所以有可能某处会有鱼钩。

【解决方案2】：

我会把你的问题分成两部分，先回答第二部分：

第 2 部分：但是，这似乎不雅，并且评论者提出了问题与标签。另外，我相信它在 HTML5 中已被弃用？

没有。它在 HTML5 中不已被弃用。事实上，colgroup 和col 一起作为表格的一部分是非常重要的元素。

例如看看这个参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

...定义表中的一列，用于定义常见的所有常见单元格上的语义...

下面说：

可能特别有用的 CSS 属性和伪类 style元素：控制宽度的width属性列;...

通过这个参考：http://www.w3.org/TR/2012/WD-html-markup-20120329/col.html#col

col 元素的 width 属性已过时。改用 CSS

总而言之，您最好使用colgroup 和/或col 来布置您的表格。它们帮助您在所有相应的单元格上定义通用语义。 CSS 是应用宽度的推荐方法，它有助于将表格的表示与标记分开。使用colgroup 和/或col 实际上会为您省去很多麻烦，并让您更好地控制您的牌桌。

第 1 部分：有没有一种好的做法来指定表格的宽度列？（例如，如果我想将第一列显示为 100px 宽，第二个为 80px 宽，第三个为 60px 宽。）

同样，如果您参考文档，您会发现通过 col 将宽度委托给 CSS 是一个很好的做法。理想情况下，您希望为整个应用程序/网站使用一致的宽度单位。如果您正在使用具有百分比的流体布局，那么为您的表格保留百分比单位也是非常有意义的。如果您正在设计像素网格布局，那么像素会更适合您的表格。

如果需要，将演示部分委托给 CSS 还可以帮助您实现响应式布局。

编辑：

关于您所描述的人们说 CSS 类名称应该“标识页面上元素的类，而不是要在样式中应用的标量值”，并且它不是语义和所有那些东西：

我个人不同意。

IMO：以 (http://getbootstrap.com/css) 为例。尽管 bootstrap 没有在名称中使用宽度（逐字），但它确实使用度量作为类名的一部分。例如col-xs-6（一列超小，跨越 4 列）。无论如何，以适合您且易于理解的方式命名您的课程。来吧，创建自己的命名约定。

【讨论】：

谢谢。您是否建议按照链接问题中的示例使用width100 样式类？
为什么不呢？我不同意那些cmets。请参阅：getbootstrap.com/css 作为示例。尽管 bootstrap 没有在名称中使用宽度（逐字），但它确实使用度量作为类名的一部分。例如col-xs-6（一列非常小，跨越 4 列）。无论如何，以适合您且易于理解的方式命名您的课程。来吧，创建自己的命名约定。
我只是想澄清一下 :) 谢谢！
@Eilidh：将其添加到答案中。
在这种情况下，我建议对 css 类使用“col1”、“col2”等名称，而不是 width100。如果设计发生变化并且您决定第一列的宽度为 200 像素怎么办？您不仅要更新 css，还要更新类名以避免混淆。在引导类名称示例中，这些类旨在用于应用程序中的任何位置，知道它们将使 xs 列跨越 4。这是它们的“身份”。但在这种情况下，该类实际上是针对该列的，最好绑定到该列名。在这种情况下，该表中的列位置是“身份”。

【解决方案3】：

是的，添加列是不好的做法，我们可以直接给宽度或添加特定的类，不需要为col添加新的更多代码。

Demo

【讨论】：