css - 当父 div 设置宽度时，为什么省略号不适用于表格单元格？

Question

我正在尝试将省略号应用于表格单元格，但根据父 div 设置单元格宽度。

考虑以下示例（此处为 JS fiddle http://jsfiddle.net/zncGk/）：

HTML

<div class="mydiv">

<table>
    <tbody>
        <tr><td>Hello Stack Overflow</td></tr>
    </tbody>
</table>

</div>

CS

.mydiv{
    width:50px;
}

td {
    border: 1px solid black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display:block;

}

JS

$(function() {
    console.log("width = " + $("td").width());
});

输出为：width = 132，省略号不出现。

我在这里想念什么？如果我直接设置表格单元格宽度，省略号有效，但我需要由父 div 设置。

Answer 1

您的代码很好并且可以工作，但是您wi dith在演示中给出了这样的宽度空间。看到这个工作演示

编辑

如果您想省略工作，您需要将表格布局设置为固定并将您的表格设置为 100%。

table{
    table-layout: fixed;
    width: 100%;
}

演示