Question

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

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

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

Answer 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>

Answer 2

尝试使用table-layout：fixed; 水平布局仅取决于表格的宽度和列的宽度，而不是单元格的内容

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

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

2 个答案: