为什么 max-width 的行为类似于表格单元格中的最小宽度？

Question

将表格单元格中的max-width 设置为 250 像素会自相矛盾地阻止单元格（列）在表格宽度发生变化时小于 250 像素。同时，最大宽度似乎根本没有受到限制。

...为什么？

小提琴：

查看实际操作：http://jsfiddle.net/cehjc8m6/1/

HTML：

<table>
<tr>
    <td>Left col</td>
    <td class="ell">
        This is a rather long text. It should be truncateed when it
        exceeds the available horizontal space.
    </td>
    <td>Right col</td>
</tr>
</table>

CSS：

table {
    width: 500px;  // change this value to see the effect
}
td {
    white-space: nowrap;
}
td.ell {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

Answer 1

我有一个非常简单的解决方案...

我在 width 和 max-width 方面遇到了完全相同的问题，但有时发现添加其他响应中提到的溢出属性等内容并没有帮助。

问题在于使用像素作为测量单位来指定值。

举个例子；我有一个表格列，我不想超过我在其中显示的图标的宽度，大约是 80x80 像素。

最后我发现简单地指定一个非常小的百分比宽度是有效的。我选择的百分比可能总是比我想要的要小，但是单元格包含图像这一事实意味着它可以拉伸到我需要适合图像的最小值。

Answer 2

正如其他人所指出的，max-width 在表格单元格上的行为不是由标准定义的。也就是说，当前* 浏览器都给出了完全相同的反直觉结果，因此必须有一个通用算法来处理这种情况（至少目前是这样）。

^{* 仅最新版本的 MSIE/Edge（但还有什么新的...）}

仔细观察，最小宽度的提及会产生误导； max-width 实际上确实限制了最大宽度。那么为什么观察到的列宽大于指定值呢？

因为它是在之前应用了指定的表格宽度。

在只有一行和两个单元格的表格中，其中一个设置了max-width、overflow:hidden和text-overflow:ellipsis，首先计算列宽，对总宽度没有任何限制。之后，单元格被拉伸到指定的表格宽度，保持它们从第一个计算步骤开始的比例。

此测试页面显示了有和没有表格宽度限制的效果，以及各种文本内容长度：http://output.jsbin.com/hebixu

要在具有设定宽度的表格中获得更可预测的结果，可以为其他单元格指定明确的宽度。再说一次，如果事先知道最佳宽度，我们可以使用table-layout:fixed。

Answer 3

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

查看规格 - http://www.w3.org/TR/CSS21/visudet.html#min-max-widths

它在某些情况下可能有效，但您可能并不期望它总是有效。

应该改用width 属性，而table-layout:fixed 可能非常有用。

Answer 4

为了使max-width 在td 中工作（如果显示为table-cell - 默认情况下），您需要设置父级（table 或您希望显示为@987654327 的另一个元素@) 为table-layout:fixed

查看更多信息here

这是一个sn-p：

var table = document.querySelector("table"),
  cell = document.querySelector(".ell"),
  sizer = document.querySelector("input"),
  span = document.querySelector("span");

sizer.addEventListener("wheel", wheelHandler, false);
updateWidthDisplay();

function wheelHandler(evt) {
  var incr = evt.deltaY < 0 ? 10 : -10;
  table.style.width = (table.offsetWidth + incr) + "px";
  updateWidthDisplay();
}

function updateWidthDisplay() {
  sizer.value = table.offsetWidth + "px";
  span.textContent = cell.offsetWidth + "px";
}

body {
  font: normal 13px sans-serif;
}
table {
  width: 500px;
  border-collapse: collapse;
  background: gold;
  table-layout: fixed;
  /* HERE IS THE TRICK */
}
td {
  white-space: nowrap;
}
td.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
  background: tomato;
}
input {
  width: 50px;
}
em {
  color: #aaa;
  padding-left: 12px;
}

<table>
  <tbody>
    <tr>
      <td>Left col</td>
      <td class="ell">
        This is a rather long text. It should be truncated when it exceeds the available horizontal space.
      </td>
      <td>Right col</td>
    </tr>
  </tbody>
</table>

<p>
  table width:
  <input> <em>&larr; use mouse wheel to change</em>
  <br>middle col width: <span></span>

Answer 5

试试这个：

td.ell {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
    display: inline-block;
}

请看这里：http://jsfiddle.net/sachinkk/cehjc8m6/3/

var table = document.querySelector("table"),
    cell  = document.querySelector(".ell"),
    sizer = document.querySelector("input"),
    span  = document.querySelector("span");

sizer.addEventListener("wheel", wheelHandler, false);
updateWidthDisplay();

function wheelHandler (evt)
{
    var incr = evt.deltaY < 0 ? 10 : -10;
    table.style.width = (table.offsetWidth + incr) + "px";
    updateWidthDisplay();
}

function updateWidthDisplay ()
{
    sizer.value = table.offsetWidth + "px";
    span.textContent = cell.offsetWidth + "px";
}

body {
    font: normal 13px sans-serif;
}
table {
    width: 500px;
    border-collapse: collapse;
    background: gold;
}
td {
    white-space: nowrap;
}
td.ell {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
    background: tomato;
    display: inline-block;
}
input {
    width: 50px;
}
em {
    color: #aaa;
    padding-left: 12px;
}

<table>
<tbody>
<tr>
    <td>Left col</td>
    <td class="ell">
        This is a rather long text. It should be truncated when it
        exceeds the available horizontal space.
    </td>
    <td>Right col</td>
</tr>
</tbody>
</table>

<p>
    table width: <input> <em>&larr; use mouse wheel to change</em><br>
    middle col width: <span></span>