ansaurus

Question

Overflow:hidden not working when using tables

Answer 1

+3 A:

Overflow only works on block level elements. Table elements aren't block elements. If you want to get those effects put a <div> inside the table cell and apply the effects to the <div>.

td.scroll div {
  background-color: #00FFFF;
  width: 100px;
  height: 100px;
  overflow: scroll;
}

td.hidden div {
  background-color: #00FF00;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

with:

<table width="100%">
<tr>
  <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
</tr>

<tr>
  <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
</tr>

<tr>
  <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
</tr>
</table>

cletus 2009-10-29 14:45:51

That did it. Thanks a lot for this and saving what's left of my hair! Guess I need to read up on my css some more.

canadiancreed 2009-10-29 14:53:25

It's a fairly arcane aspect to CSS. The only time anyone finds it out is when they have this exact problem. Believe me, been there done that.

cletus 2009-10-29 14:55:06

CSS 2.1 says that `overflow` does work on table cells. However in reality only WebKit supports scrolling on cells. `hidden` works OK though.

bobince 2009-10-29 15:09:28

Answer 2

+1 A:

Not sure if it isn't supposed to be working for table cells, but ideally you don't really want to hide them anyway. I suggest you hyphenate long words, which you can do easily with the following lib (only take few lines of js to implement):

http://code.google.com/p/hyphenator/

Example:

http://hyphenator.googlecode.com/svn/tags/Version%202.2.0/WorkingExample.html

reko_t 2009-10-29 14:46:05

Was thinking of something something similar, but unfortunately that design decision is not up to me.

canadiancreed 2009-10-29 14:48:34

Answer 3

A:

<html>
<head>
<style>
td { width: 33%; height: 2em; }
td div { width:100%;height:100%;overflow:hidden }
</style>

</head>

<body>

<table border="1" style="width:300px;">
<tr><td>x</td><td><div>y</div></td><td>z</td></tr>
<tr><td>x</td><td><div>this is going to be hidden because it is too long</div></td><td>z</td></tr>
<tr><td>x</td><td><div>y</div></td><td>z</td></tr>
</table>

</body>

</html>

bugtussle 2009-10-29 14:55:34

Answer 4

+3 A:

By default the auto-table-layout mechanism expands the table width to fit the minimum cell content width. Tell it not to do that with the table-layout property:

<table width="100%" style="table-layout: fixed">

and your example works as expected. You should probably also remove the width: 100px from the table cells, since that makes no sense in combination with a 100%-width table. (Although with fixed table layout it doesn't matter, as only the first row of cells or <col>s has any bearing on the column widths.)

Note overflow: scroll or auto doesn't work for table cells in most browsers. (It does in WebKit.)

bobince 2009-10-29 15:07:51

ansaurus

tags:

views:

answers:

Overflow:hidden not working when using tables

related questions