Question

我想在这里实现的是锁定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;
}

Answer 1

很难找到它的东西，但无论如何

添加要修复的类修复

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

和

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

希望它会有所帮助

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

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

Answer 3

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

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

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

3 个答案: