HTML表格单元格溢出

Question

我有一个问题我试图解决 table-cell 显示及其内容，尽管表格单元固定宽度和溢出已定义，但它的父宽度会增长。

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>