Question

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

...为什么？

小提琴：

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/

＆＃13;

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";
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

要使max-width在td中工作（如果显示为table-cell - 默认情况下），则需要设置父级table或者table您希望显示为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"; }的另一个元素为table-layout:fixed

查看更多信息here

这是一个片段：

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>

SELECT concat(firstname, ' ', lastname), count(*) as citizen_count 
FROM (
SELECT c.firstname, c.lastname
FROM reportBasket rb
JOIN citizen c
    ON rb.email = c.email
WHERE notifyEmployee='1'
UNION ALL 
SELECT c.firstname, c.lastname
FROM reportNoBasket rnb
JOIN citizen c
    ON rnb.citizenEmail = c.email
WHERE notifyEmployee='1'
) as T
GROUP BY firstname, lastname
ORDER BY firstname, lastname ASC

Answer 3

在CSS 2.1中，＆＃39; min-width＆＃39;和＆＃39; max-width＆＃39;在桌子上，内联表，表格单元格，表格列和列组未定义。

请参阅规格 - http://www.w3.org/TR/CSS21/visudet.html#min-max-widths

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

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

Answer 4

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

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

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

因为之前应用了，所以考虑了指定的表格宽度。

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

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

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

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

4 个答案: