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

Question

我觉得我错过了什么。我有一个 <table>设置为 width: 100%;并且我添加 CSS 以防止列变得比 50px 更窄。这是一个简单的场景。

我的问题是应用了 min-width 的列变得更宽，即使它已经比 min-width 值更宽。

问题示例:我申请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; 的表格单元格(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 有点武断地处理它。

In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.

CSS 2.1

这在以后的任何规范中都没有改变。