Question

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

我的问题是，即使宽度超过最小宽度值，应用最小宽度的列也会变宽。

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

运行以下代码并执行以下步骤可以重现我的问题：

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

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

在设置width: auto;时，任何不影响计算宽度大于50px和样式属性min-width: 50px的表格单元格（th或td）的计算宽度的解决方案都将考虑解决此问题

我使用的是谷歌浏览器版本46.0.2490.80米。

非常感谢任何帮助/见解。谢谢。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

CSS没有规定表格，内联表格，表格单元格等处理min-width和max-width的方式。您看到的行为是Chrome有点随意处理它的行为。

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

CSS 2.1

以后的任何规格都没有改变。

Answer 2

正如Matt在评论中提到的那样，添加min-width 正在以增加列的大小。表格根据内容自动调整大小，添加最小宽度50会使其增加50。

我复制了你的代码并制作了它，以便你可以看到正在发生的事情。添加50px的最小宽度就像在那里添加一个宽度为50的不可见元素（我已经方便地制作了不可见的红色）。如果你想要抵消它，尝试删除一些边距或填充（虽然这可能会破坏你的设计 - 如果没有看到你正在做的事情就无法分辨）。按“第一列上的切换修复”按钮，看看我的意思。

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

table {
  width: 100%;
}
table,
table * {
  border: 1px solid black;
}
.min-width-test:after {
  content: '';
  width: 50px;
  height: 1px;
  background: red;
  display: block;
}
.min-width-test-fixed:after {
  content: '';
  width: 50px;
  margin-right: -50px;
  height: 1px;
  background: green;
  display: block;
}

<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>
<button id="b2">Toggle fix on first column</button>

CSS＆＃39; min-width＆＃39;增加表格单元格的宽度大于值

2 个答案: