具有固定宽度列的表格 - 不指定表格宽度答案

【问题标题】：Table with fixed-width columns - without specifying table width具有固定宽度列的表格 - 不指定表格宽度
【发布时间】：2026-02-08 03:40:01
【问题描述】：

我正在寻找一种方法来创建具有固定宽度单元格的表格。当窗口太窄时，应该出现水平滚动条。

在我的示例中，有两个 400 像素的列，因此表格的宽度应为 800 像素。当屏幕宽度小于 800px 时，会出现水平滚动条。这是我正在寻找的确切行为： http://jsbin.com/xeniwovole/edit?html,css,output

现在要问：可以在不指定表格宽度的情况下完成吗？在现实生活中，表格将在列上具有动态数量，并且列宽是响应式的。因此，尝试将表格宽度计算为列宽之和是不合理的。

【问题讨论】：

在percentages 中指定宽度我猜...检查是否适合您...
对不起！当然是水平滚动条 - 将修复原始帖子。
@kukkuz - 无法想象百分比有什么帮助
这是您尝试做的吗？ jsbin.com/pelimecisa/1/edit?html,css,output
@GCyrillus 没错！解决方案是最小宽度而不是宽度，谢谢！

标签： html css

【解决方案1】：

在表格单元格上使用min-width 和max-width 而不是width。这将阻止表格调整 <td> 的大小以适应表格 100% 的宽度，这是其默认行为。

#wrap {
  overflow-x: auto;
}

table {
  table-layout: fixed;
  width: auto;
}

td {
  background-color: yellow;
  min-width: 400px;
  max-width: 400px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="wrap">
  <table>
    <tr>
      <td>First</td>
      <td>Second</td>
    </tr>
  </table>
</div>
</body>
</html>

【讨论】：

谢谢！这是正确的解决方案 - 我不知道在那种情况下宽度与最小宽度的行为。

【解决方案2】：

尝试使用表格布局：已修复；水平布局只取决于表格的宽度和列的宽度，而不是单元格的内容

table {
    table-layout: fixed;
    width: 100%; /* width property required */
}

【讨论】：