logo标签列表

设置表格单元格高度和溢出滚动

htmlcsshtml-table
5
我有一张表格，当一个单元格的内容超出了指定行高时，我希望在该单元格上显示纵向滚动条。
我有这个示例代码（链接），但无论内容多少，它都不会在y轴上显示活动滚动条。
3个回答
12
浏览器不会对TD标签应用溢出滚动条。您需要将表格单元格的内容放入div标签中，并滚动该标签：
<td><div>Do you see what I meancxzdaaaaaaaaaaaaa?</div></td>

并且:

td > div { overflow-y:scroll;overflow-x:hidden;}
1
谢谢，只是要补充一点，为了正确显示滚动条，您必须指定所需的div高度。 - Vassilis Barzokas
5

Overflow:scroll; 应该在块级元素上显示滚动条，但是 td 不是块级元素。那么在 td 上应该怎么做？CSS 规范对此并不清晰，因此浏览器的行为有所不同。

Chrome 会应用滚动条，但 FF 和 IE 不会。为了跨浏览器解决方案，您可以添加一个额外的容器 div 并将 CSS 应用于其中。

<html>
  <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
      table { width:250px;table-layout:fixed;border-collapse:collapse }
      table tr { height:1em;  }
      td > div { overflow-y:scroll;overflow-x:hidden;} 
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>This is a test.</td>
        <td><div>Do you see what I meancxzdaaaaaaaaaaaaa?</div></td>
        <td>I hate this overflow.</td>
      </tr>
    </table>
  </body>
</html>
3
td > div { overflow-y:auto;}

这将在需要时添加垂直滚动条。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接