问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

设置表格 td 高度和溢出滚动

社区维基
1
新手上路，请多包涵

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

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

原文由 Vassilis Barzokas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcsshtml-table
阅读 747
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

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

和：

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

原文由 Gareth Cornish 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

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>

原文由 Michael Low 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题