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

Solution 1

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

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

Solution 3

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

Solution 4

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?

Solution 5

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.

View more solutions

Comments

[animuson]

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

[achasinh]

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