HTML表格列宽实践

Question

在表格中选择列宽时有哪些好的做法？ 假设我有四列，名称（可变宽度）、描述（文本的长内容）、计数（最多 3 个字符）、日期（固定格式）。

什么是好的做法？我正在考虑描述的固定宽度，计数和宽度（因此实际上也使名称“固定”宽度）。 但我真正的问题是，如何选择特定的宽度尺寸。 例如，如果日期格式是 yyyy-MM-dd 是否有一些技巧可以将这 10 个字符转换为宽度，这将保证它在使用任何字体和字体大小的任何浏览器中都可以显示（也不会占用任何过多的空间)?

编辑：固定是指类似于“相对于字体宽度的固定像素数量”

Answer 1

您可以在所有要拉伸的单元格上声明white-space: nowrap;，而无需使用额外的空间（名称、日期、计数），然后只需将剩余单元格的宽度设置为 100%。这样 100% 宽的单元格将尽可能扩大，而不会导致其他单元格折叠成多行。

Answer 2

如果您想为自己节省大量标记...

首先，如果固定宽度是指固定百分比，请将以下内容添加到样式表中：

.width1 {
    width: 1%;
}
.width2 {
    width: 2%;
}
.width99 {
    width: 99%;
}
.width100 {
    width: 100%;
}

如果您决定为其中任何一个应用奇数百分比宽度，这将为您提供所需的灵活性 - 例如，其中一个为宽度 23，另一个为宽度 27。

现在这是聪明的一点。使用col 标签，您可以只应用一次宽度，而不是在每个单元格上。我知道您可以仅对第一行应用宽度，并且它们会为每隔一行设置相同单元格的宽度 - 但 col 标记也可用于设置其他属性。例如：

<table class="width100">
    <col class="width15" style="background-color: #cccccc;" />
    <col class="width65" />
    <col class="width10" />
    <col class="width10" />
    <tr>
        <td>My Sample Name</td>
        <td>My Sample Long Description</td>
        <td>5</td>
        <td>2010-Oct-08</td>
    </tr>
</table>

我通常更喜欢使用这种技术 - 但如果它是我将在多个表上使用的布局（例如，客户表可能与代理表的布局相同），那么我将为每一列创建一个类并在该类中设置宽度等。然后，我会将相关类应用于每个单元格。我想这两种方法都可以结合使用——相关的类可以应用于相关的 col，但是属性设置在一个地方（样式表）这一事实意味着你只需要在一个地方更改它。

希望这会有所帮助，并且这是您正在寻找的。​​p>

理查德