zoukankan      html  css  js  c++  java
  • table固定头部,表格tbody可上下左右滑动

    当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下:
    html代码:

    <div class="table_box_big">
    <div class="table_box">
        <table>
            <thead>
            <tr>
                <th><div>标题一</div></th>
                <th><div>标题二</div></th>
                <th><div>标题三</div></th>
                <th><div>标题标题标题标题标题标题标题标题标题四</div></th>
                <th><div>标题标题标题标题标题标题标题标题标题五</div></th>
                <th><div>标题标题标题标题标题标题标题标题标题六</div></th>
            </tr>
            </thead>
        </table>
        <div class="table_tbody_box">
            <table>
                <tr>
                    <td>信息一</td>
                    <td>信息二</td>
                    <td>信息三</td>
                    <td>信息信息信息信息信息信息信息信息信息四</td>
                    <td>信息信息信息信息信息信息信息信息信息五</td>
                    <td>信息信息信息信息信息信息信息信息信息六</td>
                </tr>
                <tr>
                    <td>信息一</td>
                    <td>信息二</td>
                    <td>信息三</td>
                    <td>信息信息信息信息信息信息信息信息信息四</td>
                    <td>信息信息信息信息信息信息信息信息信息五</td>
                    <td>信息信息信息信息信息信息信息信息信息六</td>
                </tr>
                <tr>
                    <td>信息一</td>
                    <td>信息二</td>
                    <td>信息三</td>
                    <td>信息信息信息信息信息信息信息信息信息四</td>
                    <td>信息信息信息信息信息信息信息信息信息五</td>
                    <td>信息信息信息信息信息信息信息信息信息六</td>
                </tr>
                <tr>
                    <td>信息一</td>
                    <td>信息二</td>
                    <td>信息三</td>
                    <td>信息信息信息信息信息信息信息信息信息四</td>
                    <td>信息信息信息信息信息信息信息信息信息五</td>
                    <td>信息信息信息信息信息信息信息信息信息六</td>
                </tr>
                <tr>
                    <td>信息一</td>
                    <td>信息二</td>
                    <td>信息三</td>
                    <td>信息信息信息信息信息信息信息信息信息四</td>
                    <td>信息信息信息信息信息信息信息信息信息五</td>
                    <td>信息信息信息信息信息信息信息信息信息六</td>
                </tr>
                <tr>
                    <td>信息一</td>
                    <td>信息二</td>
                    <td>信息三</td>
                    <td>信息信息信息信息信息信息信息信息信息四</td>
                    <td>信息信息信息信息信息信息信息信息信息五</td>
                    <td>信息信息信息信息信息信息信息信息信息六</td>
                </tr>
                <tr>
                    <td>信息一</td>
                    <td>信息二</td>
                    <td>信息三</td>
                    <td>信息信息信息信息信息信息信息信息信息四</td>
                    <td>信息信息信息信息信息信息信息信息信息五</td>
                    <td>信息信息信息信息信息信息信息信息信息六</td>
                </tr>
                <tr>
                    <td>信息一</td>
                    <td>信息二</td>
                    <td>信息三</td>
                    <td>信息信息信息信息信息信息信息信息信息四</td>
                    <td>信息信息信息信息信息信息信息信息信息五</td>
                    <td>信息信息信息信息信息信息信息信息信息六</td>
                </tr>
            </table>
        </div>
    </div>
    

    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{ 80px;height: 50px;border-right: 1px solid #eeeeee;text-align: center;word-break: keep-all;padding: 2px 10px;background: skyblue;}
    table tbody tr td{ 80px;height: 50px;border-right: 1px solid #eeeeee;text-align: center;border-bottom: 1px solid #eeeeee;word-break: keep-all;padding: 2px 10px;}
    

    实现效果如下:
    这里写图片描述

  • 相关阅读:
    HTTP 与 HTTPS 的区别
    cookie 和session 的区别详解
    IntelliJ远程调试教程
    selenium 自动化测试面试题及答案
    性能测试总结(一)---基础理论篇(转载)
    性能测试总结(二)---测试流程篇(转载)
    性能测试总结(三)--工具选型篇
    eclipse调试的基本意义
    控制反转(IOC)和依赖注入(DI)
    前端框架layui
  • 原文地址:https://www.cnblogs.com/gaos/p/7777887.html
Copyright © 2011-2022 走看看