HTML表格垂直和水平滚动答案

【问题标题】：HTML table scrolling vertical & horizontalHTML表格垂直和水平滚动
【发布时间】：2011-01-12 14:00:08
【问题描述】：

我正在寻找一个可以垂直和水平滚动的固定宽度和高度的表格。

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

我可以通过以下方式使标题正常工作：

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

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

有什么想法吗？

【问题讨论】：

标签： html css html-table

【解决方案1】：

考虑到您正在使用具有固定比例的表格，这将有点容易。只需在您想要垂直滚动的列内创建一个 DIV，并为其提供您喜欢的固定尺寸，并在其上附加一个“溢出-y：自动”属性。如果 div 的内容超出可视区域，verflow-y 属性将确保仅显示滚动条。示例：


<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>

【讨论】：