表格固定标题和带有滚动条的第一列答案

【问题标题】：table fixed header and first column with scrollbars表格固定标题和带有滚动条的第一列
【发布时间】：2014-09-05 14:34:10
【问题描述】：

我在这里想要实现的是锁定 HEADER 和 FIRST COLUMN，这样我就可以在向上/向下或向左/向右滚动时始终查看今天是哪一天以及我所在的名称。

我尝试了一些 jquery 插件来实现这一点，但是当表格单元格过多时，它往往会在 IE 上超时......所以我宁愿用 PURE CSS 来做这个......

有人对此有一些有效的意见吗？

JSFIDDLE： http://jsfiddle.net/dd5ysjus/15/

我会在这里粘贴代码，但它太多了......

这是我的 CSS：

div.horizscroll {
    overflow: scroll;
    width: 600px;
    height: 150px;
}

.header {
background: #D7DF01;
}

【问题讨论】：

看看this 是否有帮助。来自here。
@rubberchicken 这是我所得到的......我设法正确地创建了水平布局，但我放弃了垂直布局。我尝试使用相同的方法，但我认为我的大脑正在冻结。但你可以从这个example 工作。
附注当您使用鼠标的中键水平滚动时，jfiddle 的行为有点滑稽。最好在适当的 html 文件中尝试。
您是否正在尝试实现类似于 (Sticky Navbar)[foundation.zurb.com/docs/components/topbar.html#] 如 Foundation 所示的内容？
@Narong - 感谢您的支持并试图帮助我解决这个问题......我放弃了尝试在没有 jquery 插件的情况下做到这一点......我现在正在使用数据表，它似乎没问题到目前为止......接下来将获得 node.js 或类似的东西来实时更新表格......我想把这个赏金给你们两个......这可能吗？

标签： html css

【解决方案1】：

很难在里面找到东西，但无论如何

添加要修复的类修复

.fix{ position:fixed; background:#fff;}

和

div.horizscroll {
    overflow-x: scroll;
position:relative;
    width: 600px;
}

希望对你有帮助

【讨论】：

【解决方案2】：

试试这个

<html>
    <style>
        table{border-collapse:collapse;}
        table th{width:100px;}
        .container{overflow:scroll;border:solid 1px red;width:700px;height:300px;}
        .inner-table{position:relative;float:left;}
        .inner-table tr td{padding:53px;background:#ccc;}

    </style>
    <body>
        <table border=1>
            <th></th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>

            <tr>
                <td class="first-td">First Column</td>
                <td colspan="6" rowspan="4" style="padding:0;width:200px">
                    <div class="container">
                    <table border=1 class="inner-table">
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                        <tr>
                            <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
                        </tr>
                    </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="first-td">First Column</td>
            </tr>
            <tr>
                <td class="first-td">First Column</td>
            </tr>
            <tr>
                <td style="height:16px;"></td>
            </tr>
        </table>
    </body>
</html>

有效！但您必须根据您的数据需要设置容器行内的行高。

【讨论】：

这个解决方案不能解决@rubberchicken 的问题。当您向下或向两侧滚动时，您的标题不会跟随内容。

【解决方案3】：

您也可以通过更改 html 结构来实现这一点，请检查您更新的小提琴 - http://jsfiddle.net/dd5ysjus/12/

<table class="table-intro">
..//here goes titles
</table>
<div class="horizscroll">
...//here all data you have
</div>

【讨论】：