Question

我需要创建一个带有固定标题和固定的前两列的html表（或类似的东西）。表应该在div之下而不是在页面顶部。我尝试了很多解决方案，在所有具有固定位置的解决方案中，由于此表显示在页面顶部。

与jsfiddle链接一样。

http://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));
});

和html代码： -

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

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/

Answer 2

您的标题未对齐，因为您已在标头标记上设置position至absolute，请尝试将其替换为position:relative标记上的.tblTitle，然后你会看到它们位于黄色 div的下方，从这一点开始，应用适当的样式，并使它看起来像你想要的那样。

桌粘性标头与粘性表专栏的

2 个答案: