问题描述
我希望创建一个可以垂直和水平滚动的固定宽度和高度的表格.
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
..但是我怎样才能让列滚动而第一个保持固定?
..but how also could I get the columns scrolling with the first one remaining fixed?
有什么想法吗?
推荐答案
考虑到您正在处理具有固定比例的表格,这会有点容易.只需在您想要垂直滚动的列内创建一个 DIV,并为其提供您喜欢的固定尺寸,并为其附加一个溢出-y:自动"属性.verflow-y 属性将确保仅在 div 的内容超出可见区域时才显示滚动条.示例:
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:
<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>
这篇关于HTML 表格滚动垂直 &水平的的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!