Html 带有滚动条的 div 中的表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17808685/
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
Table in div with scrollbar
提问by Prampam
is it possible to put table in scrollable div? I tried, but then displaying bigger table with more rows and columns, distorts others divs, i mean shows in that scrollable div other divs from lower.
是否可以将表格放在可滚动的 div 中？我试过，但后来显示更大的表格，有更多的行和列，扭曲了其他 div，我的意思是在可滚动的 div 中显示来自较低的其他 div。
Thank you, Best Regards
谢谢您最好的问候
回答by gvee
HTML
HTML
<div class="table-wrapper">
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
</div>
CSS
CSS
.table-wrapper
{
border: 1px solid red;
width: 100px;
height: 50px;
overflow: auto;
}
table
{
border: 1px solid black;
margin-right: 20px;
}
td
{
width: 20px;
height: 20px;
background-color: #ccc;
}
JSFiddle
JSFiddle
回答by Mark Redman
Set a style on your div with the width and height and set overflow to auto
使用宽度和高度在 div 上设置样式并将溢出设置为自动
