Question

我想调整一些表格，以便最好地展示我的界面。有没有一种很好的练习方法来指定表格列的宽度？（例如，如果我想将第一列显示为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>标签的可靠性/弃用性。有没有更好的办法？

Answer 1

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

第2部分：然而，这似乎不够优雅，而且一位意见提供者提出了问题与标签。另外，我相信它已经在HTML5中被弃用了？

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

e.g。看看这个参考：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列的超小列）。无论如何，请以适合您并且易于理解的方式命名您的课程。来吧，创建自己的命名约定。

Answer 2

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

Answer 3

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

Demo

HTML表：指定列宽是否有好的做法？

3 个答案: