网页table宽度100%，td内容不换行，超出宽度内容省略的效果

Question

表格的宽度为100%，想要达到td的内容文字超出td宽度省略的效果，如下所示。

    <style>
        table{width:100%;}
        item1,item2,item3,item4,item5,{width:20%;}
        td{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
    </style>
    
    <table>
        <tr>
            <td class="item1">单元格单元格单元格（这段内容超出宽度则省略）</td>
            <td class="item2">单元格</td>
            <td class="item3">单元格</td>
            <td class="item4">单元格</td>
            <td class="item5">单元格</td>
        </tr>
    </table>

结果是td内超出内容并没有省略，而是撑开了td的宽度。
于是修改了下，在td内加入了div子元素用来放置内容，并将td的text-overflow等样式移至div。依旧达不到内容自适应宽度省略的效果。请问该如何去修改？

Answer 1

table{table-layout:fixed}

td里面放个div来做省略的效果吧

Answer 2

可以设置

table{table-layout:fixed}

再在th中设置宽度百分比

Answer 3

看着你写的那么多个class难受！好吧！我有强迫症。这样试试看

<style>
    table{width: 100%; table-layout: fixed;}
    item{width: 20%;}
    td{word-break: break-all; word-wrap:break-word;}
</style>

<table>
    <tr>
        <td class="item">单元格单元格单元格（这段内容超出宽度则省略）</td>
        <td class="item">单元格</td>
        <td class="item">单元格</td>
        <td class="item">单元格</td>
        <td class="item">单元格</td>
    </tr>
</table>