为什么不溢出：隐藏在td上的工作？

Question

我有一张桌子而且overflow: hidden属性不起作用，为什么会这样？

<table width="100%" style="table-layout:fixed">
  <tr height="200">
    <td width="100%" height="200" valign="middle" style="text-align: center; overflow: hidden;">
      <img src="http://salesdey.com/product_images/eb235de7eee13a0aa61dae2cc9de1f7e.gif" width="100" />
    </td>
  </tr>
</table>

Answer 1

根据w3schools： 溢出属性仅适用于具有指定高度的块元素。

由于<div>是一个块元素，您可以尝试在<td>单元格中使用它，然后在其上应用该属性。

另外，正如@Roberrt评论的那样，这里已经详细解答了。

Why does overflow:hidden not work in a <td>?

Answer 2

因为单元格的内容永远不会在Y方向上溢出单元格。单元格高度将始终垂直增长以包含其内容。因此溢出属性没有任何作用。

Answer 3

overflow:hidden无法在table-cell上工作，如果你可以更改html，你应该使用div而不是table。

但是如果你能做到......那么你应该将display:inline-block添加到td。