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;}
    

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

  • 相关阅读:
    linux命令-ps
    solr参数说明
    CAP原理和BASE思想
    java多线程文件上传服务器
    swift的简介
    浅谈对【OSI七层协议】的理解
    手写简易WEB服务器
    JVM知识整理和学习(转载并修改)
    多线程学习笔记六
    多线程学习笔记五
  • 原文地址:https://www.cnblogs.com/gaos/p/7777887.html
Copyright © 2011-2022 走看看