当父div设置宽度时，为什么省略号不能与table-cell一起使用？

Question

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

考虑以下示例（JS小提琴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这样的宽度空间。请参阅此工作demo

修改

如果你想省略省略工作，你需要将表格布局设置为固定，并使你的表格达到100％。

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

demo