表格的粘性表头和粘性列

Question

我需要创建一个 HTML 表格（或类似的外观），其中顶部和前两列固定。表格应该位于 div 下方而不是页面顶部。我尝试了许多解决方案，但所有带有固定位置的解决方案都会导致表格显示在页面顶部。

如 jsfiddle 链接所示:

https://jsfiddle.net/praveen_programmer/z3bzv9j8/1/

表格标题显示在页面顶部。我想要表格标题在带有黄色背景的 div 下方显示。div 中的内容将是动态的，并且可以增加。

我的 CSS：

.tblTitle{
   position:absolute;
    top:0px;
    margin-bottom:30px;
    background:lightblue;
}
td, th{
    padding:5px;
    height:40px;
    width:40px;
    font-size:14px;
}

#vertical_scrolling_div{
    display:inline-block;
    zoom: 1;
    *display:inline;
    padding-top:40px;
    height:300px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#freeze_container{
    display:inline-block;
    zoom: 1;
    *display:inline;
    vertical-align:top;
    width:100px;
}
#horizontal_scrolling_div{
    display:inline-block;
    zoom: 1;
    *display:inline;
    width:200px;
    overflow-x:scroll;
    vertical-align:top;
}

.freeze_table{   
    background-color: #0099dd;
    z-index:2;
}

#left_table{
    width:100px;
}

#inner_table{
    width:400px;
    overflow:hidden;
}

Javascript：-

$(function(){  
    function getRows(rows, cols){
        var rowString="";
        for(var i=0;i<cols;i++){
            rowString+="<tr>"; 
            for(var j=0;j<rows;j++){
                rowString+="<td>"+j+","+i+"</td>";
            }
            rowString+="</tr>"; 
        }
        return rowString;
    }

    $("#left_table").append(getRows(2,10));
    $("#inner_table").append(getRows(8,10));
});

And html code :-

<div style="height:100px;background-color:yellow;">Test-1</div>

<div id="vertical_scrolling_div">
    <div id="freeze_container">
        <table id="left_table" class="freeze_table">
            <tr class='tblTitle'>
                <th>Title 1</th>
                <th>Title 2</th>
            </tr>
        </table>
    </div>
    <div id="horizontal_scrolling_div">
        <table id="inner_table">
            <tr class='tblTitle'>
                <th>Title 3</th>
                <th>Title 4</th>
                <th>Title 5</th>
                <th>Title 6</th>
            </tr>
        </table>
    </div>

- praveen_programmer

---

您希望表格的标题和前两列保持固定（position: fixed）吗？还是其他类型的固定方式？ - Rohit Kumar

是的，我想要表格和前两列固定，但下面的div不要在页面顶部。 - praveen_programmer

Answer 1

我已经根据您的需求更新了代码，表头仍保持在div顶部（固定）。

.tblTitle{
    position:absolute;
    background:lightblue;
    top: 0;
}
.vertical_scrolling_div {
    position: relative; /* rest other code stays as they are */
}

JavaScript

$('#vertical_scrolling_div').scroll(function() {
    $('.tblTitle').css('top', this.scrollTop+"px");
});

https://jsfiddle.net/z3bzv9j8/9/

- Rohit Kumar

---

它不起作用了，表头仍然显示在页面顶部，我想要它在 div 下面。 - praveen_programmer

表头位于 vertical_scrolling_div 的顶部，而不是页面顶部。你看过我的 fiddle 吗？ - Rohit Kumar

@praveen_programmer 我漏掉了一行 - .vertical_scrolling_div 上的 position: relative - Rohit Kumar

Answer 2

你的标题没有对齐，因为你在标题标签上设置了position:absolute，尝试将其替换为position:relative在你的.tblTitle标签上，然后你会看到它们位于黄色div下面，从这个点开始，应用适当的样式，使其看起来符合你的要求。

- Pouya Ataei

---

我尝试过这个，但问题是我希望标题在滚动时固定，但它没有发生。 - praveen_programmer

好的，将它改为position: fixed，移除你的top:0，并添加margin-top:-50px; --> https://jsfiddle.net/Escape_Character/z3bzv9j8/5/ - Pouya Ataei

但问题是，当我动态增加div中的内容时，表头会重叠在div上。 - praveen_programmer

它如何重叠？ - Pouya Ataei

喜欢我在 JSFiddle 上更新的代码。div 的高度将自适应。在这里，我们可以动态加载数据。 - praveen_programmer