为什么最大宽度在 table 单元格中表现得像最小宽度？

Question

将 table 单元格中的 max-width 设置为 250px 矛盾的是，当宽度为table 变化。同时，最大宽度似乎也没有受到任何限制。

...为什么？

Fiddle:

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

试试这个：

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>

Answer 2

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

查看更多信息here

这是一个片段：

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 3

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.

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

它可能在某些情况下有效，但您可能不希望它始终有效。

应该用width 属性代替，table-layout:fixed经常有用。

Answer 4

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

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

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

因为它在之前应用，所以指定的table宽度被考虑在内。

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

此测试页显示有无 table 宽度限制以及各种文本内容长度的效果：http://output.jsbin.com/hebixu

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

Answer 5

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

我遇到了与 width 和 max-width 完全相同的问题，但有时发现添加诸如提到的溢出属性之类的东西在其他回复中没有帮助。

问题是使用像素作为度量单位来指定值。

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

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

为什么最大宽度在 table 单元格中表现得像最小宽度？

Why does max-width behave like a minimum width in a table cell?

html

css

html-table