在表内使用省略号

在代码中，我试图将表保存在div内。该表在100px div内具有100％的宽度。在表内使用省略号

问题是无论内容是否延伸。处理这个问题的最好方法是什么？

#container { 
 
    width: 100px; 
 
    border: 1px solid green; 
 
    } 
 

 
table { 
 
    width: 100%; 
 
    border: 1px solid blue; 
 
    } 
 

 
table div { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    width: calc(100% - 10px); 
 
    }

<div id="container"> 
 
<table> 
 
    <tr> 
 
    <td>1</td> 
 
    <td><div>abcdefghijklmnopqrstuvwxyzyxwvutsrqponmlkjihgfedcba</div> 
 
    </td> 
 
    </tr> 
 
</table> 
 
</div>

来源

2016-09-14 Daniel Williams

尝试增加'表格的布局：固定;''到table' –

根据上述链路..这里是[小提琴]（https://jsfiddle.net/venkateshwar/o1bvr62m/） –

需要记住的是，表格非常努力地显示它们中的所有内容，即使这意味着要弯曲规则来做到这一点。例如，如果100％不够，'table {width：100％}'将被忽略。所以如果你没有真正需要一张桌子，尽量不要。问题中的示例看起来更像是一个有序列表而不是表格。 –