如何在没有单独样式的单元格的情况下设置 html 表格列的宽度？答案

【问题标题】：How can I set the widths of html table columns without individual styling of cells?如何在没有单独样式的单元格的情况下设置 html 表格列的宽度？
【发布时间】：2019-10-24 17:02:06
【问题描述】：

我正在尝试找到动态设置表格列宽度的最佳方法，而不必单独设置每个单元格的宽度。

我有一个表格，无论内容如何，每列都应具有固定宽度。如果每个单元格都单独设置了宽度和最大宽度，则此方法可以正常工作。但这很难动态设置。

我正在尝试使用 colgroup 和 col 标签来设置每列的宽度，但这似乎不起作用。

table, th, td {
  border: 1px solid black;
}

th, td {
  overflow: hidden;
  white-space: nowrap;
}

<table>
  <colgroup>
    <col style="width: 50px; max-width: 50px;">
    <col style="width: 50px; max-width: 50px;">
    <col style="width: 50px; max-width: 50px;">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

我希望该示例显示截断表的第一列和第二列，但它不起作用。

【问题讨论】：

要固定表格的宽度，您需要将 table-layout 属性重置为固定developer.mozilla.org/en-US/docs/Web/CSS/table-layout 在 col 元素上设置宽度是一个不错的方法。我很惊讶 max-width 起作用了。

标签： html css

【解决方案1】：

所以我想知道这是否可以解决问题 - 您可以仅在标题上设置宽度/最大宽度，然后为所有单元格设置最大宽度：0，它似乎可以实现您想要的......

<!DOCTYPE html>
<html>
<head>
<style>

table, th, td {
  border: 1px solid black;
}

th, td {
  overflow: hidden;
  white-space: nowrap;
}

td {
  max-width: 0;
}
</style>
</head>
<body>

<table>
  <tr>
    <th style="width:50px; max-width:50px">ISBN</th>
    <th style="width:50px; max-width:50px">Title</th>
    <th style="width:50px; max-width:50px">Price</th>
  </tr>
  <tr>
    <td>347689643</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

</body>
</html>

【讨论】：

如果有人想深入了解为什么 max-width: 0 在这种情况下有效：stackoverflow.com/questions/26292408/…
有趣。这是所有浏览器的行为标准吗？
好的，似乎是标准的。至少 Vivaldi、Chrome、Firefox 和 Edge 在桌面上支持这一点。
@LarsMelander 是的，我评论中的链接包含有关此案例的更多信息以及为什么它也是跨浏览器的。最大宽度、宽度和表格单元格显示类型都得到了很好的支持，并且在这些实现中启用了此效果。

【解决方案2】：

看起来如果你添加一个 span="3" 和一个 width="#ofPixels" 即：width="100" 到你的 colgroup 元素，它会为你的列指定一个宽度。

【讨论】：

另外，如果您需要滚动，请将溢出：隐藏替换为溢出：滚动。
??您是否尝试过 max-width 和 overflow:scroll 在表格或表格元素上？
这如何让 OP 声明每列的宽度？您的代码只是将宽度应用于所有单元格 - OP 是关于声明每列的固定宽度。
@MrRobboto 我的错，不知道您想要专门用于列。我没看错。
我不是 OP 哈哈，但没问题！只是想我会指出这一点，不会投反对票或其他任何事情......