标题一
            
标题二
            
标题三
            
标题标题标题标题标题标题标题标题标题四
            
标题标题标题标题标题标题标题标题标题五
            
标题标题标题标题标题标题标题标题标题六
        

        


信息一
                
信息二
                
信息三
                
信息信息信息信息信息信息信息信息信息四
                
信息信息信息信息信息信息信息信息信息五
                
信息信息信息信息信息信息信息信息信息六
            

信息一
                
信息二
                
信息三
                
信息信息信息信息信息信息信息信息信息四
                
信息信息信息信息信息信息信息信息信息五
                
信息信息信息信息信息信息信息信息信息六
            

信息一
                
信息二
                
信息三
                
信息信息信息信息信息信息信息信息信息四
                
信息信息信息信息信息信息信息信息信息五
                
信息信息信息信息信息信息信息信息信息六
            

信息一
                
信息二
                
信息三
                
信息信息信息信息信息信息信息信息信息四
                
信息信息信息信息信息信息信息信息信息五
                
信息信息信息信息信息信息信息信息信息六
            

信息一
                
信息二
                
信息三
                
信息信息信息信息信息信息信息信息信息四
                
信息信息信息信息信息信息信息信息信息五
                
信息信息信息信息信息信息信息信息信息六
            

信息一
                
信息二
                
信息三
                
信息信息信息信息信息信息信息信息信息四
                
信息信息信息信息信息信息信息信息信息五
                
信息信息信息信息信息信息信息信息信息六
            

信息一
                
信息二
                
信息三
                
信息信息信息信息信息信息信息信息信息四
                
信息信息信息信息信息信息信息信息信息五
                
信息信息信息信息信息信息信息信息信息六
            

信息一
                
信息二
                
信息三
                
信息信息信息信息信息信息信息信息信息四
                
信息信息信息信息信息信息信息信息信息五
                
信息信息信息信息信息信息信息信息信息六
            




css样式：

.table_box_big {
 overflow-x: scroll;
 overflow-y: hidden;
 position: relative;
 height: 350px;
}
.table_box {
 overflow: hidden;
 position: absolute;
}
.table_tbody_box {
 height: 300px;
 overflow: scroll;
}
table {
 border: 1px solid #eeeeee;
}
table thead tr th {
 width: 80px;
 height: 50px;
 border-right: 1px solid #eeeeee;
 text-align: center;
 word-break: keep-all;
 padding: 2px 10px;
 background: skyblue;
}
table tbody tr td {
 width: 80px;
 height: 50px;
 border-right: 1px solid #eeeeee;
 text-align: center;
 border-bottom: 1px solid #eeeeee;
 word-break: keep-all;
 padding: 2px 10px;
}


实现效果如下：

到此这篇关于html中table固定头部表格tbody可上下左右滑动的文章就介绍到这了,更多相关html中table固定头部内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部！