欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

表头固定,表的主体设置滚动条

程序员文章站 2022-05-28 16:05:51
项目中遇到的问题,需要表头固定,给表主体设置滚动条。搜了很多种方法,bootstrap table也研究了一下。 下面是我们使用的方法。 表头放在div1中,表主体放在div2中,给div2设置固定高度,加样式overflow:auto,这样在数据多的时候会出现滚动条,数据少的时候滚动条会消失。 如 ......

项目中遇到的问题,需要表头固定,给表主体设置滚动条。搜了很多种方法,bootstrap table也研究了一下。

下面是我们使用的方法。

表头放在div1中,表主体放在div2中,给div2设置固定高度,加样式overflow:auto,这样在数据多的时候会出现滚动条,数据少的时候滚动条会消失。

如果通过bootstrap给div2加类pre-scrollable,会存在一个问题,如果数据少的时候,滚动条还是会存在。

        .warning_table_wrapper_head{
            width:1040px;
            height:50px;
            margin-left:30px;
            margin-top:20px;
        }
        .warning_table_wrapper_body{
            width:1040px;
            height:226px;
            margin-left:30px;
            overflow:auto;
        }
        #warningtablewrapperhead table,#warningtablewrapperhead table td,#warningtablewrapperhead table th{
            border-color:#2d323d;
            height:50px;
            line-height:50px;
            padding:0 0 0 10px;
        }
        #warningtablewrapperbody table,#warningtablewrapperbody table td,#warningtablewrapperbody table th{
            border-color:#2d323d;
            height:50px;
            line-height:50px;
            padding:0 0 0 10px;
        }


        /*滚动条样式*/
        #warningtablewrapperbody::-webkit-scrollbar {/*滚动条整体样式*/
            width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
        #warningtablewrapperbody::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 0;
            /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
            background: #585dff;
        }
        #warningtablewrapperbody::-webkit-scrollbar-track {/*滚动条里面轨道*/
            /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
            border-radius: 0;
            background: #2d323d;
        }
 <div class="warning_table_wrapper_head" id="warningtablewrapperhead" >
            <table class="table table-bordered" width="1040">
                <colgroup>
                    <col width="52">
                    <col width="142">
                    <col width="160">
                    <col width="258">
                    <col width="80">
                    <col width="66">
                    <col width="100">
                    <col width="100">
                    <col width="82">
                </colgroup>
                <thead>
                <tr>
                    <th>序号</th>
                    <th>物资编码</th>
                    <th>物资名称</th>
                    <th>型号</th>
                    <th>计量单位</th>
                    <th>库存量</th>
                    <th>最小安全库存</th>
                    <th>最大安全库存</th>
                    <th>缺口数量</th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="warning_table_wrapper_body" id="warningtablewrapperbody">
            <table class="table table-bordered" width="1040">
                <colgroup>
                    <col width="51">
                    <col width="142">
                    <col width="160">
                    <col width="258">
                    <col width="80">
                    <col width="66">
                    <col width="100">
                    <col width="100">
                    <col>
                </colgroup>
                <tbody>
                <tr>
                    <td>01</td>
                    <td>c-02-01-01-001</td>
                    <td>分合闸按钮</td>
                    <td>c1kr输入输出220vac 50hz kva</td>
                    <td>个</td>
                    <td>10</td>
                    <td>12</td>
                    <td>18</td>
                    <td>2</td>
                </tr>
                </tbody>
            </table>
        </div>