固定表头、滚动内容

最新推荐文章于 2021-06-07 16:37:33 发布

xxxhelloworld

最新推荐文章于 2021-06-07 16:37:33 发布

阅读量206

点赞数

分类专栏： WEB 文章标签： IE Firefox 浏览器 Google HTML

本文链接：https://blog.youkuaiyun.com/xxxhelloworld/article/details/83797348

版权

WEB 专栏收录该内容

3 篇文章

订阅专栏

以前自己学习做web项目时，好像涉及到表格内容较多的时候都是每页固定行数，然后分页，不过实际项目中可能在分页的基础上会有“固定表头、滚动内容”这种需求，目前参与的项目中就是这样的，看了这种实现，感觉很不错。
看了看同事写的样式代码，其实很简单，用div套在table外面，设置overflow：auto，然后最主要的就是这个样式

table thead tr {
                position: relative;
                top: expression(this.parentElement.parentElement.parentElement.scrollTop + 'px');
            }

接着我又Google了下找找大侠们的实现，然后才发现上面的样式在firefox下不行，杯具！接着搜…… 最后终于找出了个兼容IE、FF的例子，链接如下：
[url]http://www.stansight.com/sort/LockTableHeadSort.html[/url]
对其进行研究，做了如下笔记

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>New Document </title>
        <meta name="Generator" content="EditPlus">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <style type='text/css'>

            /* tbody样式  火狐下主要通过这一个样式来实现滚动 */
            .scrollContent {
                height: 100px;/* IE FF都可识别 */
                overflow-x: hidden; /* IE下无效 */
                overflow-y: auto;   /* IE下无效 */
            }

            .scrollContent tr {
                height: auto; /* 由于上面设置了 height: 100px; 这里需要设置以保持行高 */
            }

			/* 这段话是在网上看到的：
        因为 CSS2.1 对于在表格类元素上使用 position:relative 没有任何定义：
        relative
        The box's position is calculated according to the normal flow (this is called the position in normal flow).
        Then the box is offset relative to its normal position. When a box B is relatively positioned,
        the position of the following box is calculated as though B were not offset.
        The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group,
        table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
        所以浏览器之间理解不一样
        火狐下无效、IE则可以，所以IE只需要以下一个简单的样式就可以实现表头固定
			*/
            .fixedHeader tr {
            	background-color:#00FF00;
                position: relative;
				/* expression表达式只对IE5以上的浏览器有效，且该表达式会影响效率  */
                top: expression(this.parentElement.parentElement.parentElement.scrollTop + 'px');
            }
        </style>

        <!--[if IE]>
            <style type="text/css">
            /* IE Specific Style addition to constrain table from automatically growing in height */
            div.TableContainer {
	            height: 100px;
	            overflow-x:hidden;
	            overflow-y:auto;
            }
            </style>
        <![endif]-->
    </head>
    <body>
       <table cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td>
                    <div id="TableContainer" class="TableContainer">
                        <table>
                            <thead class="fixedHeader">
                                <tr>
                                    <th>
                                        col1
                                    </th>
                                   <th>
                                        col2
                                    </th>
                                    <th>
                                        col3
                                    </th>
                                    <th>
                                        col4
                                    </th>
                                    <th>
                                        col5
                                    </th>
                                    <th>
                                        col6
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="scrollContent">
                                <tr>
                                    <td>
                                        11
                                    </td>
                                    <td>
                                        12
                                    </td>
                                    <td>
                                        13
                                    </td>
                                    <td>
                                        14
                                    </td>
                                    <td>
                                        15
                                    </td>
                                    <td>
                                        16
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        21
                                    </td>
                                    <td>
                                        22
                                    </td>
                                    <td>
                                        23
                                    </td>
                                    <td>
                                        24
                                    </td>
                                    <td>
                                       25
                                    </td>
                                    <td>
                                       26
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        31
                                    </td>
                                    <td>
                                        32
                                    </td>
                                    <td>
                                        33
                                    </td>
                                    <td>
                                        34
                                    </td>
                                    <td>
                                        35
                                    </td>
                                    <td>
                                        36
                                    </td>
                                </tr>
								<tr>
                                    <td>
                                        41
                                    </td>
                                    <td>
                                        42
                                    </td>
                                    <td>
                                        43
                                    </td>
                                    <td>
                                        44
                                    </td>
                                    <td>
                                        45
                                    </td>
                                    <td>
                                        46
                                    </td>
                                </tr>
								<tr>
                                    <td>
                                        51
                                    </td>
                                    <td>
                                        52
                                    </td>
                                    <td>
                                        53
                                    </td>
                                    <td>
                                        54
                                    </td>
                                    <td>
                                        55
                                    </td>
                                    <td>
                                        56
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>