HTML表格列宽实践

Posted 2023-03-06

【中文标题】HTML表格列宽实践

【英文标题】：HTML Table column width practices

【发布时间】：2011-04-22 23:41:34

【问题描述】：

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

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

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

【问题讨论】：

您可以使用 em 作为度量单位，这样可以保证您有足够的空间，但可能会为您提供比您需要的更多的空间。

我认为像素相对于字体宽度的固定数量意味着 em，正如 Kevin Wiskia 所评论的那样，但我个人认为修复像素是一个坏主意（当涉及到宽度时 - 它对高度有好处尽管）。原因是您不知道用户屏幕的宽度。假设您的表格只需要 500 像素，但用户有一个 1920 x 1080 的屏幕。这意味着您的表格现在占据了不到 25% 的屏幕宽度。但是，使用我的方法，您可以占据屏幕的 75%，并将每列占该 75% 的某个百分比。

@ClarkeyBoy，好点子。也许一个好的解决方案是将表格宽度指定为 75%，并使用空格指定各个列/单元格：nowrap，字体大小为 em？然后这些列将占用所需的空间（没有过多的空间），即使在 1920x1080 中也不会显得很小。

@ClarkeyBoy - 您假设布局本身将占据屏幕宽度的 100%。另外，如果表格只需要 500px，但你强制它拉伸到几乎 4 倍，列之间会增加很多不必要的空间，使得行很难跟随，除非有些实现了行高亮。

@FreekOne：最常见的布局技术是使用百分比。我假设 icanBany1 在我的回答中使用了这种布局技术 - 但我认为我应该指出使用固定宽度的缺点以防万一。我已经制作了几个网站，并且更喜欢有一个宽度为 50% 或 60% 的 div，居中，然后其中的内容无论屏幕大小看起来都不会太大或太小。任何我现在都被 X Factor 分心的人，所以我不知道我写的内容是否有意义。如果我没有表达我的观点或想到其他要说的话，我会发表另一条评论。

【参考方案1】：

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

【参考方案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>

理查德

【讨论】：

反对票是怎么回事？它与问题完全相关，并且是一个非常快速的解决方案......我希望人们必须说出他们为什么投反对票......

可能是因为它在你的 CSS 中添加了很多多余的代码，需要转移到客户端。这是没有语义的。 标签不能 100% 工作。

否决，因为它不是语义的。 CSS 类名应该标识页面上元素的类，而不是在样式中应用的标量值。

仅仅因为名称有一个标量值恰好应用于其中的属性，并不意味着名称不是“语义”.. width100 可能是 widthFull 并且不不要改变任何东西。按照你的信条广告无限/恶心，你最终会得到许多具有完全相同属性的类，因为你“语义上”不应该考虑一个具有 width: 2px; 的 div 类与相同tds 的类.. 它总是一个混合和权衡；没有什么是绝对的。当然，您不想将宽度更改为 40，但名称却是 20.. 但这只是开发人员的懒惰。

@MatthewTaylor Tailwind CSS 和 Bootstrap 4 似乎违背了您的建议 - 现在被认为是“最佳实践”。类实用程序现在已成为常态。