Html 设置表格 td 高度和溢出滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14058487/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set table td height and overflow scroll
提问by Vassilis Barzokas
I have a table and I want to display a vertical scrollbar on the td when its contents are exceeding a specified height of the row.
我有一个表格，当它的内容超过行的指定高度时，我想在 td 上显示一个垂直滚动条。
I have thissample code but it does not display active scrollbar on y axis no matter the content.
我有这个示例代码，但无论内容如何，它都不会在 y 轴上显示活动滚动条。
回答by Gareth Cornish
Browsers won't apply overflow scrollbars to TDtags. You will need to enclose the content of your table cells in a divtag, and scroll that:
浏览器不会对TD标签应用溢出滚动条。您需要将表格单元格的内容包含在div标签中，然后滚动：
<td><div>Do you see what I meancxzdaaaaaaaaaaaaa?</div></td>
and:
和：
td > div { overflow-y:scroll;overflow-x:hidden;}
回答by mikel
Overflow:scroll;should give a scroll bar on a block level element, which tdis not. What should it do on a td? The CSS spec is not clear on this, so browser behavior differs.
Overflow:scroll;应该在块级元素上提供滚动条，但td不是。它应该做什么td？CSS 规范对此并不明确，因此浏览器行为有所不同。
Chrome will apply a scroll bar, but FF and IE won't. For a cross-browser solution, you can add an extra container div and apply the CSS to that instead though.
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>
回答by Hai Nguyen
td > div { overflow-y:auto;}
This will add the vertical scroll bar when needed.
这将在需要时添加垂直滚动条。
