overflow:hidden not working when using tables

Question

I’m having issues with long strings of text stretching out my tables and overflow:hidden does not seem to be doing what I exect. Here’s the sample code I am using to test this effect:

<html>
    <head>
        <style type="text/css">
            td.scroll
            {
                background-color:#00FFFF;
                width:100px;
                height:100px;
                overflow:scroll;
            }
            td.hidden 
            {
                background-color:#00FF00;
                width:100px;
                height:100px;
                overflow:hidden;
            }
        </style>
    </head>
    <body>
        <table width="100%">
            <tr>
                <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
            </tr>
            <tr>
                <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
            </tr>
            <tr>
                <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
            </tr>
        </table>
    </body>
</html>

When loaded, the text will, regardless of the table width, stretch out to display all of the string. What I’m after is to have any part of the string that would go past the cell measurement not be display. Is this even possible with tables, and if so, what am I doing wrong?

cletus · Accepted Answer · 2009-10-29 14:50:52Z

33

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>

edited Oct 29, 2009 at 14:50

answered Oct 29, 2009 at 14:45

cletus

627k169 gold badges922 silver badges945 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

canadiancreed Over a year ago

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.

cletus Over a year ago

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.

bobince Over a year ago

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

user888750 Over a year ago

Please don't put block-level elements inside inline-level elements. You can simply just set the <td> to `display: inline-block' to achieve what you want.

bobince · Accepted Answer · 2009-10-29 15:07:51Z

23

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.)

answered Oct 29, 2009 at 15:07

bobince

538k111 gold badges675 silver badges846 bronze badges

1 Comment

matteo Over a year ago

"Table-layout: fixed" doesn't change a thing. The height still expands. Tested on chrome which is webkit

bugtussle · Accepted Answer · 2009-10-29 14:55:34Z

0

<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>

answered Oct 29, 2009 at 14:55

bugtussle

1,41611 silver badges16 bronze badges

Comments

reko_t · Accepted Answer · 2009-10-29 14:46:05Z

-1

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

answered Oct 29, 2009 at 14:46

reko_t

56.6k10 gold badges92 silver badges77 bronze badges

1 Comment

canadiancreed Over a year ago

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

Collectives™ on Stack Overflow

overflow:hidden not working when using tables

4 Answers 4

4 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related