なぜオーバーフローしないのですか？

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

overflow:hiddenは、テーブルのセルでは動作しませんあなたがHTMLを変更することができれば、あなたはテーブルの代わりにdiv要素を使用する必要があります。

ただし、できる場合は、display:inline-blockをtdに追加する必要があります。

Answer 2

w3schoolsによると： オーバーフロープロパティは、指定された高さのブロック要素に対してのみ機能します。

<div>はブロック要素なので、<td>セルにその要素を使用して、そのプロパティを適用できます。

また、@Robertのコメントとして、これは既にここで詳細に回答されています。

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

Answer 3

セルの内容は、Y方向にセルをオーバーフローはないので。セルの高さは、内容を格納するために常に垂直に増加します。オーバーフロープロパティには何もありません。