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>

    大家可以预览一下:

    表头一表头一表头一表头一表头一表头一表头一表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
     
  • 相关阅读:
    linux下使用 du查看某个文件或目录占用磁盘空间的大小
    Mac 使用bootcamp安装windows 运行Hyper-v时的硬件虚拟化没有启动的问题
    DockerToolbox安装docker
    如何在Ubuntu中安装Docker和运行 Docker容器
    react native开发过程遇到的各种问题汇总
    程序员接私活怎样防止做完了不给钱?
    Creat React App deploy on GitHub
    git 提交报错 cannot do a partial commit during a merge
    排序合并连接(sort merge join)的原理
    开源 免费 java CMS
  • 原文地址:https://www.cnblogs.com/aptdo2008/p/3140519.html
Copyright © 2011-2022 走看看