HTML表格：是否有指定列宽的良好实践？

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

我看了一下，但是选择的答案（虽然对提问的用户很有用）并没有描述如何做到这一点

这个问题的另一个答案是使用

为每个列指定一个类，然后确定CSS中的宽度。然而，这似乎不雅观，一位评论者建议使用

标记。而且，我相信它在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> 

---

这似乎很不雅观，我不确定

标签的可靠性/弃用性。有更好的办法吗

为了避免在每个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;
}

---

关于

：n个孩子（和伪类）的更多信息，请点击此处：
我将把你的问题分为两部分，首先回答第二部分：

第2部分：然而，这似乎不雅，一位评论者提出了一些问题
带着标签。而且，我相信它在HTML5中已经被弃用了

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

e、 g.查看此参考文件：

…定义表中的列，并用于定义公共
所有公共单元格上的语义

再往下看，上面写着：

CSS属性和伪类，它们可能对
设置元素样式：用于控制元素宽度的宽度属性
专栏

按此参考：

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

总之，您最好使用
colgroup
和/或
col
来布局表格。它们帮助您在所有对应的单元格上定义通用语义。CSS是应用宽度的推荐方法，这有助于保持表的表示与标记分离。使用
colgroup
和/或
col
实际上会为您节省很多麻烦，并使您能够更好地控制表格

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

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

如果需要，将表示部分委托给CSS也将帮助您实现响应性布局

编辑：

关于您描述的问题，有人说CSS类名必须“标识页面上的元素类，而不是样式中要应用的标量值”，而且它不是语义之类的东西：

我个人不同意这一点

国际海事组织：以这：（）为例。虽然引导程序在名称中不使用宽度（逐字），但它确实使用度量作为类名的一部分。e、 g.
col-xs-6
（一列非常小，跨越4列）。无论如何，要以一种适合你且易于理解的方式命名你的类。继续，创建您自己的命名约定。
是的，添加列是一种不好的做法，我们可以直接为其指定宽度或添加特定类，无需为列添加更多新代码

为什么不直接将类放在单元格上呢？虽然我可以对第一行单元格这样做，但我不确定这样做是否是一个可取的解决方案。我甚至不确定给
s或
s一个类，例如
width100
等是否是一个好的做法。有几种方法可以解决这个问题（不过，抱歉，我应该在第一个例子旁边加上这个作为备选方案），但是如果可能的话，我想找到一个好的解决方法。干杯！我使用伪类来执行典型的交替行背景色技巧，但我没有想到要这样做。但有一个问题——并非我所有的表都在顶部有一行
s。有些只是一行
等-我该如何解释？非常感谢。我刚刚添加了一组th样式，它似乎很管用。不过，我还没有进行过适当的跨浏览器测试，所以可能会有鱼钩。谢谢。您是否建议按照链接问题中的示例使用
width100
样式类？为什么不？我不同意这些评论。看看这个：作为一个例子。虽然引导程序在名称中不使用宽度（逐字），但它确实使用度量作为类名的一部分。e、 g.
col-xs-6
（一列非常小，跨越4列）。无论如何，要以一种适合你且易于理解的方式命名你的类。继续，创建您自己的命名约定。我只是想澄清：）谢谢@艾利德：在答案中添加了这个。在这种情况下，我建议使用“col1”、“col2”等名称。。。对于css类，而不是width100。如果设计发生变化，您决定第一列的宽度为200px，该怎么办？您不仅要更新css，还要更新类名以避免混淆。在bootstrap类名示例中，这些类将用于应用程序中的任何位置
th:nth-child(1){
    color: red;
    width: 100px;
}
th:nth-child(2) {
    color: blue;
    width: 80px;
}
th:nth-child(3) {
    color: green;
    width: 60px;
}