<td> 上的溢出属性不会创建滚动条

Posted 2023-03-06

【中文标题】<td> 上的溢出属性不会创建滚动条

【英文标题】：Overflow attribute on <td> does not create a scrollbar

【发布时间】：2012-02-27 10:50:22

【问题描述】：

我试图创建一个带有溢出的表格单元格<td>，但它不起作用...

这是我的 CSS 代码：

td.blog_content

    max-height: 50px;
    overflow: auto;
    width: 360px;
    text-align: left;
    padding: 2px;

还有我的 html：

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

如果文本太长，它会创建一个带有滚动条的简单框...

【问题讨论】：

当然我们不会使用<table> 来进行样式设置，所以.blog_content 显然是表格数据；)

什么标题...“CSS 样式不起作用”。很好，我们可以解雇我们所有的设计师，这些年来他们一直在做错事。

@Ktash 这只是我有错误的部分......

@FrederickMarcoux 一个错误？这就是我们来这里的目的；) 现代 CSS 可以处理大多数表格可以处理的任何情况。

@FrederickMarcoux 就像我说的，modern CSS 可以处理大多数事情。这意味着我们可以让 IE7+（这是 CSS2 +some）支持大多数表格可以做的任何事情。如果您在谈论 CSS3，那么没有任何表格可以做 CSS 做不到的事情。如果您想修复它，我建议您将其作为问题发布，因为社区中的许多人（有时包括我自己）都擅长解决这些问题。

【参考方案1】：

在包含您的单元格的table 上设置table-layout: fixed;。或者，将每个单元格的内容包装在 div 中，然后对其应用样式。

【讨论】：

你确定table-layout 属性会影响这个吗？ I can't seem to get it to work.

【参考方案2】：

我不确定您是否可以在表格单元格中通过overflow: auto 强制滚动条，但您肯定可以使用div-标签。 您是否考虑过使用div？

【参考方案3】：

尝试将其包装在 <div> 中。我很确定没有为<td> 元素定义溢出属性，至少在HTML4 中没有。

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

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

【讨论】：

您也需要将它包装在 HTML5 中的 中

【参考方案4】：

看起来你必须将内容包装到一个 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;

演示：http://dabblet.com/gist/1747301

【参考方案5】：

你可以放：

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

添加一个 DIV 元素将具有固定的高度或宽度，并且溢出属性将使其自动滚动。