zoukankan      html  css  js  c++  java
  • 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 {
              1px;
         }
         table thead,tbody tr,tfoot tr,thead tr {
             display:table;
             100%;
             table-layout:fixed;
         }
  • 相关阅读:
    字串变换
    重建道路
    poj3278 Catch That Cow
    机器人搬重物
    [HNOI2004]打鼹鼠
    曼哈顿距离
    邮票面值设计
    poj1101 The Game
    解决了一个堆破坏问题
    模型资源从无到有一条龙式体验
  • 原文地址:https://www.cnblogs.com/007sx/p/9761166.html
Copyright © 2011-2022 走看看