在伸缩块中包装单元格内容。作为奖励，单元格自动匹配可见宽度。

table { width: 100%; } div.parent { display: flex; } div.child { flex: 1; width: 1px; overflow-x: hidden; text-overflow: ellipsis; } <table> <tr> <td> <div class="parent"> <div class="child"> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div> <div> </td> </tr> </table>

XML

<td><div>Your overflowing content here.</div></td>

CSS

td div
{
 max-height: 30vh;
 overflow: auto;
}

为了这个特定的目的而试图打乱整个表是没有意义的。是的，有时候如果你明确不想成为另一个600个div嵌套的Twitter/Facebook“开发者”，添加一个额外的元素是可以的。

如果你指定table-layout: fixed;在table元素上，那么td的样式应该生效。不过，这也会影响细胞的大小。

Sitepoint在这里稍微讨论了一下表格布局方法: http://reference.sitepoint.com/css/tableformatting

如果你只是想让表格自动布局

不使用max-width，或百分比列宽度，或表布局:固定等。

https://jsfiddle.net/tturadqq/

工作原理:

步骤1:让表自动布局完成它的工作。

当有一个或多个列有很多文本时，它会尽可能地缩小其他列，然后将长列的文本换行:

步骤2:将单元格内容包装在一个div中，然后将该div设置为max-height: 1.1em

(额外的0.1em用于显示在文本底部下方的字符，如'g'和'y'的尾部)

步骤3:在divs上设置标题

这对可访问性有好处，并且对于我们稍后使用的小技巧是必要的。

第四步:在div上添加CSS::after

这是一个棘手的问题。我们使用content: attr(title)设置CSS::after，然后将其放置在div的顶部，并设置text-overflow: ellipsis。我把它涂成红色，让它更清楚。

(注意长列现在有一个尾省略号)

步骤5:设置div文本的颜色为透明

我们做完了!

在伸缩块中包装单元格内容。作为奖励，单元格自动匹配可见宽度。

table { width: 100%; } div.parent { display: flex; } div.child { flex: 1; width: 1px; overflow-x: hidden; text-overflow: ellipsis; } <table> <tr> <td> <div class="parent"> <div class="child"> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div> <div> </td> </tr> </table>

我解决这个问题使用单元格内的绝对定位div(相对)。

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

就是这样。然后你可以添加一个top:值到div或垂直居中:

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height 
}

为了在右侧获得一些空间，您可以减少max-width一点。