为什么最大宽度的行为类似于表格单元格中的最小宽度

将

表格单元格中的max-width设置为 250px 将矛盾地防止单元格（列）在表格宽度更改时小于 250px。同时，最大宽度似乎根本没有受到限制。

。为什么？

小提琴：

在操作中查看以下内容： 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;
}

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

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

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

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

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

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

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

试试这个：

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>

为了使

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

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>

在 CSS 2.1 中，"最小宽度"和"最大宽度"对表的影响，内联表、表单元格、表列和列组是定义。

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

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

应改用 width 属性，table-layout:fixed经常有用。

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

我在宽度和最大宽度方面遇到了完全相同的问题，但有时发现添加其他响应中提到的溢出属性之类的内容无济于事。

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

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

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

相关内容

最新更新

热门标签：