Question

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

td, th { width: 400px; }

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

存在两个类似的问题here和here，但它们只解决了初始宽度，并没有讨论视口限制。

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

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

......但只有width才能实现这个目的，这似乎很奇怪。

Answer 1

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

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

你可以设置包裹表格的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>

我知道你没有在你的问题中设置jQuery标签，但是你可能想要使用它，所以根据{{1的总和动态计算width动态div } widths

请参阅下面的代码段或jsFiddle

td

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;
}

Answer 2

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

th div{
  width: 400px;
}

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

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

2 个答案: