为什么视口宽度会覆盖 TD 上的 CSS 宽度？

Question

当对表格单元格应用宽度值时，一旦表格宽度达到视口宽度，规则就会被忽略，例如

td, th { width: 400px; }

我希望 10 列的表格（大约）4000 像素，但 Firefox 和 Chrome 只会将表格拉伸到视口宽度（see Fiddle）。在此之后，单元格宽度实际上并未设置为 400 像素。我在下面的问题中读到table-layout:fixed 用于强制单元格宽度，但在这里不起作用。

here 和 here 存在两个类似的问题，但它们只涉及初始宽度，不讨论视口限制。

请问为什么会这样？我看到有一个解决方法...

td, th { min-width: 400px; max-width:400px; }

...但是当 width 单独实现这个目的时，这似乎很奇怪。

Answer 1

display:table-cell（这是 td 元素的默认值）使 td 的宽度限制为 table 宽度。如果表格的宽度为 100 像素，它们将保持 100 像素的宽度。但是如果您将它们设置为 400px 的宽度并且表格的宽度为 100px，它们将忽略表格的宽度并无限制地扩展。看第一个答案

1. 将width:0 添加到table，它会起作用，因为表格单元格不能相对于width:0 折叠，因此它们可以不受限制地展开

见下面的 sn-p 或jsFIddle

table {
  table-layout:fixed;
  border-collapse: collapse;
  background-color: white;
width:0;
}

td,
th {
  border: 1px solid #999;
  padding: 0.25em;
  text-align: left;
  width: 400px; // If uncommented, rule is ignored
}

<div>
  <table>
    <thead>
      <tr>
        <th>&nbsp;</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>

  </table>
</div>

1. 您可以设置包裹表格的 div 的宽度，并将其设置为自动溢出（这是一个修复而不是一个简洁的解决方案）

见下面的 sn-p 或jsFiddle

table {
  table-layout:fixed;
  border-collapse: collapse;
  background-color: white;
}
div {
	width:4000px;
	overflow:auto;
}

td,
th {
  border: 1px solid #999;
  padding: 0.25em;
  text-align: left;
  width: 400px;
}

<div>
  <table>
    <thead>
      <tr>
        <th>&nbsp;</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>

  </table>
</div>

1. 我知道您没有在问题中设置 jQuery 标签，但您可能想要使用它，以便根据 td 宽度的总和动态计算 div 的 width >

见下面的 sn-p 或jsFiddle

var tdWidthTotal = 0;

$('td').each(function(index) {
    tdWidthTotal += parseInt($(this).width(), 10);
});
$("div").width(tdWidthTotal)

table {
  table-layout:fixed;
  border-collapse: collapse;
  background-color: white;
}
div {
	overflow:auto;
}

td,
th {
  border: 1px solid #999;
  padding: 0.25em;
  text-align: left;
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <table>
    <thead>
      <tr>
        <th>&nbsp;</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>

  </table>
</div>

Answer 2

显然display: table-cell 忽略了宽度。您可以在 th 元素中添加带有 display: block 和 width: 400px 的元素，它将起作用：

th div{
  width: 400px;
}

https://jsfiddle.net/abogvgsb/11/