HTML表格单元格中的溢出

Question

我有一个问题要解决，有关表格单元格显示及其内容的问题，尽管表格单元格固定宽度和已定义溢出，但它会使父级宽度增加。

JSFiddle： http : //jsfiddle.net/8cevryh9/

<table border="3">
    <tr>
        <td style="width: 20px">1</td>
        <td style="width: 80px; overflow:hidden;">
            <div style="width:200px">
                FAT CONTENT
            </div>
        </td>
        <td style="width: 30px">3</td>
    </tr>
</table>

在这里，第二个单元格的宽度为200px，我希望它保持80px，内容溢出隐藏起来。 有人知道吗？

Answer 1

在表格上设置宽度，并将表格布局设置为固定：

 table { table-layout: fixed; width: 130px; } 

 <table border="3"> <tr> <td style="width: 20px">1</td> <td style="width: 80px; overflow:hidden;"> <div style="width:200px"> FAT CONTENT </div> </td> <td style="width: 30px">3</td> </tr> </table>