1

我不知道在引用 CSS 时它叫什么，但在 Excel 中，您可以冻结窗格（例如标题行），这样当您向下滚动时，您仍然可以看到您正在查看的数据的列标题。在我的网页上，我有一个类似网格的数据。有什么东西可以用来保存这些数据，或者我只需要制作两个单独的表格并努力让第一个和第二个表格对齐吗？

我也对 jQuery 插件或计划旧的 js 解决方案持开放态度。

我添加了一些代码来帮助：

<table border="1" class="usertablex" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>City</th>
        </tr>
        </thead>
    <tbody style="height:20px;overflow:scroll;">
        <tr class="subtext">
            <td class="Dwidth175">John Silva</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
        <tr class="subtext">
            <td class="Dwidth175">John Thomas</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
        <tr class="subtext">
            <td class="Dwidth175">Xris</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
        <tr class="subtext">
            <td class="Dwidth175">Bob Denver</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
    </tbody>
</table>
4

6 回答 6

2

将您的标题放入 athead并将您的数据放入tbody，为 the 定义一个固定高度tbody并将overflow:scroll属性添加到它。应该够了。

于 2012-09-13T22:11:33.230 回答
2

这是一个名为Pure CSS Scrollable Table with Fixed Header的工作示例。它通过将tbody元素设置为display:block,overflow:auto并添加特定tbody高度来工作。

编辑：它适用于 Firefox 和 Chrome，但 IE7、8、9 似乎已经破坏了对原始方法的支持。由于该<tbody style="display:block; overflow:auto"/>技巧在目标浏览器中不起作用，我认为您将需要使用两个带有“table-layout：fixed”的表来保持列宽刚性或找到一个将单个表分成两个的插件以同样的方式自动（也许只适用于 IE7+）。

于 2012-09-13T22:13:59.123 回答
1

尝试使用position: fixed;css 选择器

于 2012-09-13T22:10:57.440 回答
1

如果你在标题周围放一个 div 你可以给它 css

.divname
{
    position:fixed
    top:0;
}

它将保持在屏幕顶部的位置。

于 2012-09-13T22:11:46.847 回答
0

感谢所有人的建议，但我发现这更适合我的需要。

http://www.farinspace.com/jquery-scrollable-table-plugin/

于 2012-09-19T14:20:56.000 回答
0

我已经在 IE8 和 OS X 上的 Chrome 中对此进行了测试。虽然这个解决方案有一些缺点，并且可能需要对其他浏览器进行进一步调整，但我认为这会有所帮助。例如表格必须有一个固定的宽度——为了有一个灵活的宽度，我相信你需要添加一些额外的 JS 来设置窗口大小时的宽度。

基本上，这个想法是你将表格包裹在几个 div 中——设置position: relative;在外部的 div 中——在内部的 div 中overflow: auto;使用 a height，然后克隆thead并position: absolute;在左上角。

http://jsfiddle.net/ZDeDw/2/

任何人都可以分叉并进行改进——只需发表评论即可。

于 2012-09-14T23:48:37.853 回答