Question

我有一张桌子，当它的内容超出行的指定高度时，我想在td上显示一个垂直滚动条。

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

Answer 1

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

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

和

td > div { overflow-y:scroll;overflow-x:hidden;}

Answer 2

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>

Answer 3

td > div { overflow-y:auto;}

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

设置表td高度和溢出滚动

3 个答案: