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
  • 169,008
  • 28
  • 173
  • 236
Xeen
  • 6,955
  • 16
  • 60
  • 111

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
  • 1,016
  • 1
  • 9
  • 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
  • 78,296
  • 16
  • 112
  • 156
-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
  • 546
  • 1
  • 3
  • 11