在表列上伪造最小宽度

好样的 <table> 标签是用于显示表格数据的最具语义的 HTML。 但我发现很难控制表格的显示方式，尤其是在动态环境中的列宽，您可能不知道每个表格单元格中有多少内容。 在某些情况下，一列超宽而其他列则被卷曲。 其他时候，我们得到相同的宽度，但代价是包含更多内容和需要更多空间的列。

但我发现了一个 CSS tricks-y 解决方法，它有助于让事情变得更容易一些。 这就是我想在这篇文章中向您展示的内容。

该问题

首先我们需要了解浏览器是如何处理布局的。 我们有 table-layout CSS 中的属性，用于定义表格应如何分配每个表格列的宽度。 它采用以下两个值之一：

• auto （默认）
• fixed

让我们从一个表格开始，不在其列上定义任何宽度。 换句话说，我们将让浏览器通过应用来决定给每列多少宽度 table-layout: auto 在 CSS 中。 您会注意到，浏览器会尽最大努力使用它必须在每列之间划分完整可用宽度的算法。

如果我们用 table-layout: fixed，那么浏览器只会将全部可用空间除以总列数，然后将该值用作每列的宽度：

但是如果我们想控制列的宽度怎么办？ 我们有 <colgroup> 元素来帮忙！ 它由个人组成 <col> 我们可以使用这些元素来指定每列所需的确切宽度。 让我们看看它是如何工作的 table-layout: auto:

为了便于说明，我已经内联了样式。

浏览器不考虑行内宽度，因为它们加起来超过了可用表空间的数量。 结果，该表从列中窃取空间，以便所有列都可见。 这是非常好的默认行为。

如何 <colgroup> 与 table-layout: fixed. 让我们找出来：

这看起来一点都不好。 我们需要其中包含一堆内容的列稍微弯曲，同时为其余列保持固定宽度。 一个固定的 table-layout value 尊重宽度——但太多了以至于它占用了需要最多空间的列的空间……这对我们来说是不行的。

如果我们可以设置一个 min-width 在专栏上而不是 width. 这样，该列会说，“在我们达到这个最小值之前，我可以给你们所有人一些我的宽度。”然后表格将简单地溢出其容器并为用户提供水平滚动以显示表格的其余部分。 但不幸的是， min-width 表列不受 <col> 元件。

解决方案

解决办法是伪造一个 min-width 我们需要有点创意才能做到这一点。

我们可以添加一个空 <col> 作为我们的第二列 <colgroup> 在 HTML 中并应用 colspan 第一列上的属性，以便第一列占用两列的空间：

<table> <colgroup> <col class="col-200" /> <col /> <col class="col-input" /> <col class="col-date" /> <col class="col-edit" /> </colgroup> <thead> <tr> <th colspan="2">Project name</th> <th>Amount</th> <th>Date</th> <th>Edit</th> </tr> </thead> <!-- etc. -->
</table>

请注意，我已经添加了类来代替前面示例中的内联样式。 同样的想法仍然适用：我们将宽度应用于每一列。

诀窍是第一个之间的关系 <col> 和空的第二个 <col>. 如果我们对第一个应用宽度 <col> （它的 200px 在上面的代码片段中），那么当固定表格布局划分可用空间以分配给列时，第二列将被吃掉。 但是第一列的宽度（200px) 受到尊重并保持不变。

瞧！ 我们有一个假 min-width 设置在表格单元格上。 第一个单元格随着可用空间的变化而弯曲，并且表格溢出以进行水平滚动，正如我们希望的那样。

（我加了一点 粘性定位 到那里的第一列。）

无障碍

让我们不要完全忘记这里的可访问性。 我通过 Windows 上的 NVDA 和 macOS 上的 VoiceOver 运行该表，发现所有五列都已公布，即使我们只使用其中的四列。 当第一栏成为焦点时，它会宣布“第一至第二栏”。 不是很优雅，但也不会让人迷路。 我想我们可以扔一个 aria-hidden 未使用列上的属性，但也知道 ARIA 不能替代糟糕的 HTML。

---

我承认，这感觉有点，嗯，hacky。 但它确实有效！ 如果您在评论中有不同的方法，请告诉我……或者知道这种“黑客攻击”可能给我们的用户带来的任何困惑。

• SEO 支持的内容和 PR 分发。 今天得到放大。
• 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 访问这里。
• Sumber: https://css-tricks.com/faking-min-width-on-a-table-column/