Overflow attribute on does not create a scrollbar

Question

I trying to create a table cell <td> with an overflow but it doesn't work...

There's my CSS code:

td.blog_content
{
    max-height: 50px;
    overflow: auto;
    width: 360px;
    text-align: left;
    padding: 2px;
}

And my HTML:

<td class="blog_content"><?php echo $blog['content']; ?></td>

It would create a simple box with a scrollbar if the text is too long...

And of course we wouldn't use a `` for styling so `.blog_content` is obviously tabular data ;) — LoveAndCoding, Feb 05 '12 at 19:01
What a title... "CSS styling doesn't work". Good, we can just fire all our designers then, they've been doing it wrong all these years. — Borealid, Feb 05 '12 at 19:02
@FrederickMarcoux A bug? That's what we're here for ;) Modern CSS can handle most any situation a table can. — LoveAndCoding, Feb 05 '12 at 19:06
@Ktash Indeed, but CSS2.1 can't handle anything! CSS3 cans but I'm not using it for compatibility reason... — Frederick Marcoux, Feb 05 '12 at 19:11
@Borealid LOL! I hate question in title. So I just describe it ;) — Frederick Marcoux, Feb 05 '12 at 19:13
@FrederickMarcoux Like I said, _modern_ CSS can handle most anything. This means we can make IE7+ (which is CSS2 +some) support most anything a table can do. If you're talking CSS3, than there is nothing a table can do that CSS can't. If you'd like to get it fixed, I'd recommend posting it as a question as many here in the community (myself included at times) are good at solving those issues. — LoveAndCoding, Feb 05 '12 at 19:14
@Ktash: "Modern CSS can handle most any situation a table can" - Really! Horziontal as well as Verticaly alignment using ONLY CSS properties that are ONLY meant to do that? — Jawad, Feb 05 '12 at 19:47
@Jawad Yes. Depends on the content which you want to align, but yes. This is turning into a full discussion and debate that is off-topic though. If you really want to get into a discussion about it, I'd be more than happy to oblige, but why don't we move it to [chat](http://chat.stackoverflow.com/rooms/3840/css). — LoveAndCoding, Feb 05 '12 at 19:53
@Ktash: http://stackoverflow.com/questions/9159026/how-to-make-the-content-100-height-and-equal-height-columns-in-this-layout — Jawad, Feb 06 '12 at 11:03

score 8 · Accepted Answer · answered Feb 05 '12 at 19:03

8

Try wrapping it in a <div>. I'm pretty sure the overflow attribute is not defined for a <td> element, at least in HTML4 it's not.

<td class="blog_content">
    <div><?php echo $blog['content']; ?></div>
</td>

.blog_content div {
    height: 50px;
    max-height: 50px;
    overflow: auto;
}

answered Feb 05 '12 at 19:03

nickb

59,313
13
108
143

You'll need to wrap it in a
in HTML5 too
– achasinh Mar 10 '17 at 12:57

score 2 · Answer 2 · answered Feb 05 '12 at 19:02

2

Set table-layout: fixed; on the table containing your cells. Alternatively, wrap the contents of each cell in a div and apply the styles to that.

answered Feb 05 '12 at 19:02

Niet the Dark Absol

320,036
81
464
592

1

Are you sure the `table-layout` property affects this? [I can't seem to get it to work.](http://jsfiddle.net/ySUVg/5/) – animuson Feb 05 '12 at 19:45

score 2 · Answer 3 · answered Feb 05 '12 at 19:03

It seems like you have to wrap the contents into a div:

<td class="blog_content"><div><?php echo $blog['content']; ?></div></td>

td.blog_content div
{
    max-height: 50px;
    overflow: auto;
    width: 360px;
    text-align: left;
    padding: 2px;
}

Demo: http://dabblet.com/gist/1747301

score 1 · Answer 4 · answered Feb 05 '12 at 19:03

1

I'm not sure you can force scrollbar by overflow: auto in a table-cell, but you sure can with a div-tag. Have you considered using a div?

answered Feb 05 '12 at 19:03

jln-dk

294
1
2
11

score 1 · Answer 5 · answered Feb 05 '12 at 19:04

1

You can put :

<td class="blog_content">
  <div style="overflow:auto;width:200px;">
      <?php echo $blog['content']; ?>
  </div>
</td>

Adding a DIV element will with fixed height or width and overflow property to auto will make it scroll.

answered Feb 05 '12 at 19:04

Alex Peta

1,407
1
15
26

Overflow attribute on does not create a scrollbar

5 Answers5

Linked