table给tbody设置滚动条

table结构例子:

<table class="layui-table">
                <thead>
                    <tr>
                        <th>
                            贷款项目
                        </th>
                        <th>
                            贷款类型
                        </th>
                        <th>
                            所属公司
                        </th>
                        <th>
                            产品联系人
                        </th>
                        <th>
                            是否上线
                        </th>
                        <th>
                            联系电话
                        </th>
                        <th>
                            点击量(详情)
                        </th>
                        <th>
                            访问量(详情)
                        </th>
                        <th>
                            点击量(申请)
                        </th>
                        <th>
                            访问量(申请)
                        </th>
                        <th>
                            点击量(子页面)
                        </th>
                        <th>
                            访问量(子页面)
                        </th>
                    </tr>
                </thead>
                <tbody id="x-img">
                </tbody>
                <tfoot>
                    <tr style="background: #f2f2f2;">
                        <td >总计:</td>
                        <td align="center">——</td>
                        <td align="center">——</td>
                        <td align="center">——</td>
                        <td align="center">——</td>
                        <td align="center">——</td>
                        <td class="djCount1"></td>
                        <td class="fwCount1"></td>
                        <td class="djCount"></td>
                        <td class="fwCount"></td>
                        <td class="djCount3"></td>
                        <td class="fwCount3"></td>
                    </tr>
                </tfoot>
            </table>

css如下:

table tbody {
         display:block;
         max-height:500px;
         overflow-y:scroll;
         overflow-x:hidden;
     }
     ::-webkit-scrollbar {
         width: 1px;
     }
     table thead,tbody tr,tfoot tr,thead tr {
         display:table;
         width:100%;
         table-layout:fixed;
     }

 

posted @ 2018-10-09 16:36  007少侠  阅读(1674)  评论(0编辑  收藏  举报
友情链接:便宜vps(CN2GIA线路)
站长统计: