Question

我为div设置了一个CSS属性table-cell。我还指定了div的宽度并设置了隐藏的溢出，但由于table-cell属性，div不关心宽度。如果我放置任何大图像，它会超出宽度。如何使用表格单元格并使用固定宽度的div？

.right{
    display: table-cell;
    overflow: hidden !important;
    vertical-align: top;
    width: 400px;
}

Answer 1

奇怪，this JSFiddle似乎对我有用。

您遇到什么问题浏览器？

此外，要强制表格单元格的最大宽度，请使用max-width属性。您可以see it here，代码如下。

HTML：

<div class='table'>
  <div class='tr'>
    <div class='right'>hey</div>
  </div>
</div>

CSS：

.table {
    display: table;
}
.tr {
    display: table-row;
}
.right{
    display: table-cell;
    overflow: hidden !important;
    vertical-align: top;
    max-width: 400px;
    outline: 1px solid #888;
}

Answer 2

display: table-cell将遵循表格大小规则 - 如果内容太大，则会扩展以使其适合。

你真的需要使用display: table-cell吗？为了使它工作，你必须将它包装在另一个div中，给它宽度为400并将其设置为overflow: hidden但这似乎适得其反。

表格单元格属性忽略宽度

2 个答案: