jquery +javascript +html 实现表格加tbody滚动条-CFANZ编程社区

滚动条

tablecode

滚动条效果

jquery +javascript +html 实现表格加tbody滚动条_jquery

滚动条

::-webkit-scrollbar {
            width: 1px; /*对垂直流动条有效*/
            height: 10px; /*对水平流动条有效*/
        }
        /*定义滚动条的轨道颜色、内阴影及圆角*/
        ::-webkit-scrollbar-track{
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: rosybrown;
            border-radius: 3px;
        }
       /*定义滑块颜色、内阴影及圆角*/
        ::-webkit-scrollbar-thumb{
            border-radius: 7px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #E8E8E8;
        } 
        /*定义两端按钮的样式*/
        ::-webkit-scrollbar-button {  background-color:#E8E8E8; } 
        /*定义右下角汇合处的样式*/
       ::-webkit-scrollbar-corner {  background:khaki; }

tablecode

<html>
<head>
<title>New Document</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>

/* 表格样式 */
.table_zl_id_div_a {
    position:fixed;
    width: 600px;
    height: 450px;
     
}
.table_zl_id_div_b {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    background-color: #66cccc;
    font-size: 20px;
}
 .table_zl_id_div_c{
 width: 600px;
    height: 450px;
    overflow-y: hidden;
    overflow-x: scroll;
 }
.table_zl_id_div_c table {
    width: 590px;
    margin: 5px;
    height: 410px;
    font-size: 12px;
    color: #000;
    
}
 
.table_zl_id_div_c table thead {
    width: 590px;
    display: block;
}
 
.table_zl_id_div_c table tbody {
    height: 380px;
     
    overflow-y: scroll;
    overflow-x: hidden;
    display: block;
    text-align: center;
}
 
.table_zl_id_div_c table tr th div {
    width: 92px;
    font-size: 14px;
    text-align: center;
}
 
.table_zl_id_div_c table tr td div {
    width: 92px;
    text-align: center;
}
 
.table_zl_id_div_c table tr td {
    border: 1px solid #fff;
}
 
.table_zl_id_div_c table tr th {
    border: 1px solid #fff;
}


</style>
<body>
    <div class="table_zl_id_div_a" id="zl_tz_nr_id"
        style="display: block; top: auto; bottom: 50px; left: 310px;">
        <div class="table_zl_id_div_b" id="zl_tz_id">
            <span id="table_zl_id_div_b_span">断面总览</span> <span style="float:right;margin-right:10px;">  X </span>
        </div>
        <div class="table_zl_id_div_c">
            <table border="0" cellspacing="0" style="border-collapse: collapse;">
                <thead></thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</body>
<script>
        
        //数据替换成自己需要用的数据
        var data = [{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"},{"s1":"ss","s2":"ss","s3":"ss","s4":"ss","s5":"ss","s6":"ss"}]
        
//直接把表头和表内全部载入
var addTableF=function(features){
            var HtmlStrPoIntsthead = "";
            var HtmlStrPoIntstbody = "";
            debugger;
            //编写表头
            HtmlStrPoIntsthead += '<tr>';
            for(var j in features[0]){
                //if(foreignWaste.dataAll.notParameter.indexOf(j) == -1){
                    HtmlStrPoIntsthead += '<th><div>'+ j +'</div></th>';
                //}
            }
            HtmlStrPoIntsthead += '</tr>';
            //编写表格
            for (i = 0, len = features.length; i < len; i++) {
                HtmlStrPoIntstbody += '<tr>';
                for(var j in features[i]){
                    //if(foreignWaste.dataAll.notParameter.indexOf(j) == -1){
                        HtmlStrPoIntstbody += '<td><div>'+ features[i][j] +'</div></td>';
                    //}
                }
                HtmlStrPoIntstbody += '</tr>';
            }
            $(".table_zl_id_div_c table thead").empty().html(HtmlStrPoIntsthead);
            $(".table_zl_id_div_c table tbody").empty().html(HtmlStrPoIntstbody);
        }
        addTableF(data);
 </script>
</html>