Html HTML表格垂直和水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2191451/
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
HTML table scrolling vertical & horizontal
提问by thegunner
I'm looking to create a table of fixed width and height that can scroll vertically and horizontally.
我希望创建一个可以垂直和水平滚动的固定宽度和高度的表格。
I'm looking for the first row to be the fixed header, but also the first column to be fixed and the other columns to be able to scroll to the right.
我正在寻找第一行作为固定标题，但也是第一列要固定，其他列能够向右滚动。
I can get the header working as such by something like this:
我可以通过这样的方式让标题正常工作：
http://www.cssplay.co.uk/menu/tablescroll.html
http://www.cssplay.co.uk/menu/tablescroll.html
..but how also could I get the columns scrolling with the first one remaining fixed?
..但是我怎样才能让第一个保持固定的列滚动？
Any ideas?
有任何想法吗？
回答by DoctorLouie
This would be somewhat easy considering you are working with a table with fixed proportions. Simply create a DIV inside the column you'd like to scroll vertically and give it the fixed dimensions of your liking and append to it an 'overflow-y:auto' attribute. The verflow-y attribute will make sure only to present a scrollbar if the content of the div exceeds viewable area. Example:
考虑到您正在使用具有固定比例的表格，这会有点容易。只需在您想要垂直滚动的列内创建一个 DIV，并为其提供您喜欢的固定尺寸，并为其附加一个“溢出-y：自动”属性。verflow-y 属性将确保仅在 div 的内容超出可见区域时才显示滚动条。例子：
<style type="text/css">
.scrollable { width:300px; height:400px; overflow-y:auto; overflow-x:hidden; clip-rect:(0px, 300px, 400px, 0px); }
</style>
<table width="500" height="500" cellpadding="0" cellspacing="0" border="0">
<tr height="100">
<td colspan="2">Banner</td>
</tr>
<tr height="400" valign="top">
<td width="200">Left Column</td>
<td width="300"><div class="scrollable">Scrollable area<br><br><br><br><br><br><br><br><br><br><br>Scrollable area<br><br><br><br><br><br><br><br><br><br><br></div></td>
</tr>
</table>
