zoukankan      html  css  js  c++  java
  • table 锁定表头,出滚动对齐

    前一段时间来了一个汇总的需求,想锁定表头,这个问题在网上找了老半天,实现起来都比较麻烦,经过这几天的摸索终于找到一个简洁的处理方法

    下面介绍一下如何处理的:

    1、thead 和tbody 放两个table里面 主要是让表头的父容器padding-right: 17px; 17px是滚动条的宽度,可以通过js动态求出滚动条的宽度,然后设置父容器的宽度即可

    <div style=" 100%;">
            <!--表头-->
            <div id="mytable" style=" 100%; padding-right: 17px;">
                <table style=" 100%;">
                    <tr>
                        <th>
                            表头一
                        </th>
                        <th>
                            表头一
                        </th>
                        <th>
                            表头一
                        </th>
                        <th>
                            表头一
                        </th>
                        <th>
                            表头一
                        </th>
                        <th>
                            表头一
                        </th>
                        <th>
                            表头一
                        </th>
                        <th>
                            表头一
                        </th>
                    </tr>
                </table>
            </div>
            <div id="container" style=" 100%; overflow-y: scroll; height: 100px;">
                <table style=" 100%;">
                    <tr>
                        <td>
                            表头一
                        </td>
                        <td>
                            表头一
                        </td>
                        <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>
                        <td>
                            表头一
                        </td>
                        <td>
                            表头一
                        </td>
                    </tr>
                    <tr>
                        <td>
                            表头一
                        </td>
                        <td>
                            表头一
                        </td>
                        <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>
                        <td>
                            表头一
                        </td>
                        <td>
                            表头一
                        </td>
                    </tr>
                    <tr>
                        <td>
                            表头一
                        </td>
                        <td>
                            表头一
                        </td>
                        <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>
                        <td>
                            表头一
                        </td>
                        <td>
                            表头一
                        </td>
                    </tr>
                    <tr>
                        <td>
                            表头一
                        </td>
                        <td>
                            表头一
                        </td>
                        <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>
                        <td>
                            表头一
                        </td>
                        <td>
                            表头一
                        </td>
                    </tr>
                    <tr>
                        <td>
                            表头一
                        </td>
                        <td>
                            表头一
                        </td>
                        <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>
                        <td>
                            表头一
                        </td>
                        <td>
                            表头一
                        </td>
                        <tr>
                            <td>
                                表头一
                            </td>
                            <td>
                                表头一
                            </td>
                            <td>
                                表头一
                            </td>
                            <td>
                                表头一
                            </td>
                            <td>
                                表头一
                            </td>
                            <td>
                                表头一
                            </td>
                            <td>
                                表头一
                            </td>
                            <td>
                                表头一
                            </td>
                        </tr>
                    </tr>
                </table>
            </div>
            <div>
            </div>
        </div>

    大家可以预览一下:

    表头一表头一表头一表头一表头一表头一表头一表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
     
  • 相关阅读:
    ADB常用命令
    HttpClient4.x 使用cookie保持会话
    HttpClient发起Http/Https请求工具类
    MakeFile 文件的使用
    SQL连接查询和嵌套查询详解
    Linux中进程控制块PCB-------task_struct结构体结构
    Mysql数据库--语句整理/提升/进阶/高级使用技巧
    进程池分析
    mmap和shm共享内存的区别和联系
    IO多路复用模型之epoll实现机制
  • 原文地址:https://www.cnblogs.com/aptdo2008/p/3140519.html
Copyright © 2011-2022 走看看