Overflow attribute on <td> 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 <table> for styling so .blog_content is obviously tabular data ;) — LoveAndCoding
– LoveAndCoding, Commented Feb 5, 2012 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
– Borealid, Commented Feb 5, 2012 at 19:02
@FrederickMarcoux A bug? That's what we're here for ;) Modern CSS can handle most any situation a table can. — LoveAndCoding
– LoveAndCoding, Commented Feb 5, 2012 at 19:06
@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
– LoveAndCoding, Commented Feb 5, 2012 at 19:14

nickb · Accepted Answer · 2012-02-05 19:03:32Z

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 5, 2012 at 19:03

nickb

59.7k13 gold badges115 silver badges149 bronze badges

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

1 Comment

achasinh Over a year ago

You'll need to wrap it in a <div> in HTML5 too

Niet the Dark Absol · Accepted Answer · 2012-02-05 19:02:40Z

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 5, 2012 at 19:02

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

1 Comment

animuson Over a year ago

Are you sure the table-layout property affects this? I can't seem to get it to work.

TimWolla · Accepted Answer · 2012-02-05 19:03:46Z

2

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

answered Feb 5, 2012 at 19:03

TimWolla

32.9k8 gold badges67 silver badges97 bronze badges

Comments

JesperCodes · Accepted Answer · 2012-02-05 19:03:28Z

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 5, 2012 at 19:03

JesperCodes

2941 gold badge2 silver badges11 bronze badges

Comments

Alex Peta · Accepted Answer · 2012-02-05 19:04:56Z

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 5, 2012 at 19:04

Alex Peta

1,4051 gold badge15 silver badges27 bronze badges

Collectives™ on Stack Overflow

Overflow attribute on <td> does not create a scrollbar

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related