设置表td高度和溢出滚动

Vas*_*kas 4 html css html-table

我有一个表,当它的内容超过行的指定高度时,我想在td上显示一个垂直滚动条.

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

小智 11

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

<td><div>Do you see what I meancxzdaaaaaaaaaaaaa?</div></td>
Run Code Online (Sandbox Code Playgroud)

和:

td > div { overflow-y:scroll;overflow-x:hidden;} 
Run Code Online (Sandbox Code Playgroud)


mik*_*kel 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>
Run Code Online (Sandbox Code Playgroud)