CSS“min-width”增加表格单元格的宽度大于值

Question

我觉得我失去了一些东西。我有一个<table>设置width: 100%;，并添加 CSS 以防止列变得比 50px 窄。这是一个简单的场景。

我的问题是，应用了最小宽度的列会变得更宽，即使它已经比最小宽度值宽。

问题示例：我应用min-width: 50px;到td宽度为 123px 的元素，td宽度增加到 167px。我希望应用于min-width: 50px;渲染宽度为 123px 的元素不会更改元素宽度。

可以通过运行以下代码并按照以下步骤重现我的问题：

1. 检查表格第一列的宽度
2. 验证列的宽度是否大于 50px
3. 如果第一列的宽度小于 50 像素，请增加浏览器窗口的宽度。
4. 当第一列的显示宽度大于50px时，单击表格下方的按钮。
5. 第一列的宽度应该增加，尽管不小于最小宽度值。

注意：单击该按钮将切换应用于形成表格第一列的表格单元格（th 和 td 元素）的类。班级适用min-width: 50px;。

任何不影响计算宽度大于 50px 且width: auto;设置时style 属性的表格单元格（th 或 td）的计算宽度的解决方案都将视为解决了该问题min-width: 50px。

我使用的是 Google Chrome 版本 46.0.2490.80 m。

任何帮助/见解将不胜感激。谢谢。

$("button").click(function() {
  $("table tr > *:nth-child(1)").toggleClass("min-width-test")
});

table {
  width: 100%;
}
table,
table * {
  border: 1px solid black;
}
.min-width-test {
  min-width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>First</th>
    <th>Second</th>
    <th>Third</th>
    <th>Fourth</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
</table>
<button>Toggle min-width on first column</button>

Answer 1

CSS 没有关于表格、内联表格、表格单元格等如何处理min-width以及如何处理的规范max-width。您所看到的行为是 Chrome 某种程度上任意处理它的方式。

在 CSS 2.1 中，“min-width”和“max-width”对表格、内联表格、表格单元格、表格列和列组的影响未定义。

CSS 2.1

这一点在以后的规范中都没有改变。