0

I have a table and the overflow: hidden property doesn't work, why is that?

<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>
mplungjan
  • 155,085
  • 27
  • 166
  • 222
Xeen
  • 6,755
  • 14
  • 53
  • 106

3 Answers3

0

According to w3schools : The overflow property only works for block elements with a specified height.

Since <div> is a block element you can try to use that in your <td> cell and then apply the property on it.

Also, as commented by @Roberrt this is already answered here in detail.

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

Community
  • 1
  • 1
5eeker
  • 968
  • 1
  • 8
  • 30
0

Because the contents of a cell never overflow the cell in the Y direction. The cell height will always grow vertically to contain its contents. So there's nothing for the overflow property to do.

Alohci
  • 73,780
  • 12
  • 107
  • 149
-2

overflow:hidden not work on table-cell, if you can change the html, you should use a div instead of table.

But if you can do it... Then you should add display:inline-block to the td.

Albert Font
  • 526
  • 1
  • 3
  • 11