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

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

  • 相关阅读:
    如果因特网中的所有链路都提供可靠的交付服务,TCP可靠传输服务是多余的吗?
    编译运行java程序出现Exception in thread "main" java.lang.UnsupportedClassVersionError: M : Unsupported major.minor version 51.0
    chrome浏览器插件的开启快捷键
    sqlzoo练习题答案
    2019Falg
    python绘图踩的坑
    精益数据分析--测试分析
    np.random的随机数函数
    numpy中文件的存储和读取-嵩天老师笔记
    喜欢的话
  • 原文地址:https://www.cnblogs.com/gaos/p/7777887.html
Copyright © 2011-2022 走看看