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

时间:2014-09-05 14:34:11

标签: html css

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

3 个答案:

答案 0 :(得分:-1)

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

添加要修复的类修复

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

div.horizscroll {
    overflow-x: scroll;
position:relative;
    width: 600px;
}
希望它会有所帮助

答案 1 :(得分:-1)

试试这个

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

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

答案 2 :(得分:-2)

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

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