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

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

  • 相关阅读:
    Canvas与Image互相转换示例以及利用该技术实现微信长按自动识别二维码功能
    chrome浏览器无法安装非应用商店插件的解决办法
    用canvas绘制android机器人
    TortoiseGit保存用户名和密码的方法
    event对象的兼容性
    利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)
    jQuery动画的hover连续触发动画bug处理
    用jquery实现平滑的页面滚动效果
    实现段落文字两端对齐的css样式
    前端构建工具gulpjs的使用介绍及技巧(转)
  • 原文地址:https://www.cnblogs.com/gaos/p/7777887.html
Copyright © 2011-2022 走看看