溢出：隐藏在表格内不起作用答案

【问题标题】：overflow:hidden doesn't work inside a table溢出：隐藏在表格内不起作用
【发布时间】：2012-01-30 22:09:11
【问题描述】：

当我尝试下面的代码时，隐藏溢出不起作用（它会扩展）：

<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="1024" height="100" colspan="3">&nbsp;</td>
  </tr>
  <tr><td width="1024">
    <div style="width:1024;height:436;overflow:hidden;">
    <div style="position:absolute;">
    <table border="0" cellpadding="0" cellspacing="0"><tr>
    <td width="51"><img src="images/page1_04.jpg" width="51" height="436" /></td>
    <td width="922" height="437"><img src="images/page1_05.jpg" width="922" height="436" /></td>
    <td width="51"><img src="images/page1_06.jpg" width="51" height="436" onMouseOver="this.src='images/hover/page1_arrow_hover_06.jpg'" onMouseOut="this.src='images/page1_06.jpg'" /></td>
    <td width="300"><img src="images/page2_05.jpg" /></td>
    <td width="51"><img src="images/page2_04.jpg" width="51" height="436"  onMouseOver="this.src='images/hover/page2_arrow_hover_04.jpg'" onMouseOut="this.src='images/page2_04.jpg'" /></td>
    <td width="922" height="437"><img src="images/page2_05.jpg" width="922" height="436" /></td>
    <td width="51"><img src="images/page2_06.jpg" width="51" height="436" /></td>
    </tr></table>
    </div>
    </div>
    </td>
  </tr>
</table>

但是，当我只使用代码片段（父 div）时，它可以正常工作。

我做错了什么？

提前谢谢你，标记。

【问题讨论】：

您已将内部 div 设为 absolute，这意味着它不再受文档流或其父 div 的宽度/高度设置的约束。

标签： css html overflow hidden

【解决方案1】：

您需要在表格元素上使用table-layout:fixed; along with overflow:hidden; 设置样式。

【讨论】：

感谢您的快速评论！如果我理解正确，表格应该是：但它仍然无法正常工作。我是不是做错了什么？

谢谢大家！这是关于添加“table-layout:fixed;overflow:hidden;”在表格样式中，使 DIV 的位置相对并保持删除父 DIV。你是最棒的！

【解决方案2】：

这应该可行：

<td  width="1024" height="100" style="display:block; overflow:hidden;"></td>

【讨论】：