HTML 表格垂直和水平滚动

Question

我想创建一个可以垂直和水平滚动的固定宽度和高度的表格。

我正在寻找固定标题的第一行，以及要固定的第一列和能够向右滚动的其他列。

我可以通过这样的方式让 header 正常工作:

http://www.cssplay.co.uk/menu/tablescroll.html

..但是我怎样才能让列滚动而第一列保持固定？

有什么想法吗？

Answer 1

考虑到您正在使用固定比例的表格，这会有些容易。只需在您想要垂直滚动的列内创建一个 DIV，并为其指定您喜欢的固定尺寸，并为其附加一个“overflow-y:auto”属性。 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>