Overflow attribute on does not create a scrol

问题:

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

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

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

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

回答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?

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