为什么CSS宽度被视口宽度覆盖在TD上？

Question

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

td, th { width: 400px; }

我希望一个10列的表是4000 10，但火狐和Chrome只将表扩展到视口宽度(见Fiddle)。在此基础上，单元格宽度实际上没有设置为400‘t。我在下面的问题中看到，table-layout:fixed用于强制单元格宽度，但在这里不起作用。

这里和这里存在两个类似的问题，但它们只处理初始宽度，而不讨论视口限制。

为什么会发生这种事？我看到有个解决办法..。

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

...but只是觉得奇怪的是，只有width才能达到这个目的。

Answer 1

显示:表格单元格(这是td元素的缺省值)使td的宽度限制在table宽度。如果表的宽度为100 in，则它们将保持100 in宽度。但是，如果设置它们的宽度为400 if，而表的宽度为100 if，则它们将忽略表的宽度并不受限制地展开。见第一答案

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

见下面的片段或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的宽度，并将溢出自动设置为表(这是一个修复，而不是一个整洁的解决方案)。

见下面的片段或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标记，但是您可能需要使用它，以便根据div宽度之和动态地计算div的td

见下面的片段或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/