4

我有一个表格，我想td在其内容超过行的指定高度时显示一个垂直滚动条。

我有这个示例代码，但无论内容如何，​​它都不会在 y 轴上显示活动滚动条。

4

3 回答 3

12

浏览器不会将溢出滚动条应用于TD标签。您需要将表格单元格的内容包含在div标签中，然后滚动：

<td><div>Do you see what I meancxzdaaaaaaaaaaaaa?</div></td>

和：

td > div { overflow-y:scroll;overflow-x:hidden;}
于 2012-12-27T17:20:10.877 回答
5

Overflow:scroll;应该在块级元素上给出一个滚动条，但事实td并非如此。它应该在 a 上做什么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>
于 2012-12-27T17:20:23.917 回答
3 
td > div { overflow-y:auto;}

这将在需要时添加垂直滚动条。

于 2015-10-26T08:52:28.043 回答