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>

    大家可以预览一下:

    表头一表头一表头一表头一表头一表头一表头一表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
     
  • 相关阅读:
    maven的tomcat插件如何进行debug调试
    jre,jdk,jvm的关系
    maven私服Nexus3.2的使用
    Markdown插入图表
    GAME-BASED LEARNING
    Game Based Learning: Why Does it Work?
    31 Game-Based Learning Resources for Educators
    Gamification and Game-Based Learning
    Gamification vs. Game-Based Learning
    WHAT IS GAME-BASED LEARNING?
  • 原文地址:https://www.cnblogs.com/aptdo2008/p/3140519.html
Copyright © 2011-2022 走看看