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>

    大家可以预览一下:

    表头一表头一表头一表头一表头一表头一表头一表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
    表头一 表头一 表头一 表头一 表头一 表头一 表头一 表头一
     
  • 相关阅读:
    【BZOJ1835】[ZJOI2010]base 基站选址 线段树+DP
    【BZOJ1786】[Ahoi2008]Pair 配对 DP
    【BZOJ3956】Count 主席树+单调栈
    【BZOJ4605】崂山白花蛇草水 权值线段树+kd-tree
    【BZOJ2597】[Wc2007]剪刀石头布 最小费用流
    前端学习笔记之CSS属性设置
    前端学习笔记之HTML body内常用标签
    前端学习笔记之CSS介绍
    前端学习笔记之CSS选择器
    博客园美化技巧汇总
  • 原文地址:https://www.cnblogs.com/aptdo2008/p/3140519.html
Copyright © 2011-2022 走看看