表头固定的前提下表格添加纵向滚动条

　　有时候在不分页且数据多的时候就需要滚动条，或者说是下拉加载的时候也需要滚动条，但是希望在滚动的时候数据的表头固定便于理解表体。

1. 第一种，在tbody元素上进行滚动

　　这种方式有个缺陷就是所有的单元格的宽度一样，平分整个tr的宽度，不会根绝内容自适应宽度。

如下:

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
                text-align: left;
                border:1px solid #000;
            }
            td,th{
                border:1px solid #000;
            }
            
            tbody{
                display: block;
                overflow-x: hidden;
                overflow-y: auto;
                height: 100px;
            }
            thead,tbody tr{
                display: table;
                width: 100%;
                table-layout: fixed;
                word-break: break-all;
            }
            table thead{
                width: calc(100% - 17px);
            }
        </style>
    </head>

    <body>
        <div style="height: 250px;"></div>
        <div style="height: 250px;"></div>
        <table cellspacing="0" cellpadding="0">
            <thead>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
                <th>表头4</th>
                <th>表头5</th>
            </thead>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </table>

    </body>

</html>
复制代码

结果:

 

有时候需要根据屏幕可用高度来动态设置表格的高度和表头的宽度:(也就是可用宽度不足以显示内容的时候将tbody定高，并且将thead的宽度减去滚动条的宽度使得上下对齐)

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
                text-align: left;
                border: 1px solid #000;
            }
            
            td,
            th {
                border: 1px solid #000;
            }
            
            tbody {
                display: block;
                overflow-x: hidden;
                overflow-y: auto;
            }
            
            thead,
            tbody tr {
                display: table;
                width: 100%;
                table-layout: fixed;
                word-break: break-all;
            }
        </style>
        <script src="../js/jquery-1.8.3.min.js"></script>
    </head>

    <body>
        <div style="height: 250px;"></div>
        <div style="height: 250px;"></div>

        <div id="tebleDiv">
            <table cellspacing="0" cellpadding="0">
                <thead>
                    <th>表头1</th>
                    <th>表头2</th>
                    <th>表头3</th>
                    <th>表头4</th>
                    <th>表头5</th>
                </thead>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
            </table>
        </div>

    </body>

</html>
<script>
    $(function() {
        var windowHeight = $(window).height(); //窗口可用高度
        var topValue = $("#tebleDiv").offset().top;
        var tebleDivHeight = $("#tebleDiv").height();
        if (parseFloat(topValue) + parseFloat(tebleDivHeight) + 180 < parseFloat(windowHeight)) {
            return;
        }
        
        var realHeight = windowHeight - topValue -50;
        $("table tbody").css("height", realHeight + "px");
        $("table thead").css("width", ($("table thead").width() - 18) + "px");
    });
</script>
复制代码

结果:

 

解释:

display:table 　　使得子元素平分父元素的宽度 (加在table上无用，必须针对tr设置)
table-layout:fixed　　在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

thead,tbody tr {
display: table;
width: 100%;
table-layout: fixed;
word-break: break-all;
}

 

            table thead{
                width: calc(100% - 17px);
            }

为了使thead元素和tbody tr的宽度一致

 

            tbody{
                display: block;
                overflow-x: hidden;
                overflow-y: auto;
                height: 100px;
            }

　　将tbody元素以块级元素显示并且定高，超过高度自动显示滚动条。

 

2. 第二种:在table的父元素div元素上进行滚动，外层div滚动的时候表头固定

 　　这种方式有个解决了上面的缺陷，但是有个问题是给人的效果不太平滑。重要代码是封装的JS方法:

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
                text-align: left;
                border: 1px solid #000;
            }
            
            td,
            th {
                border: 1px solid #000;
                background-color: #FFFFFF;
            }
            
            #tebleDiv {
                overflow-x: hidden;
                overflow-y: auto;
                height: 120px;
            }
        </style>
        <script src="../js/jquery-1.8.3.min.js"></script>
    </head>

    <body>
        <div id="tebleDiv">
            <table cellspacing="0" cellpadding="0">
                <thead>
                    <th>表头1</th>
                    <th>表头2</th>
                    <th>表头3</th>
                    <th>表头4</th>
                    <th>表头5</th>
                </thead>
                <tr>
                    <td>111111111111111111111111的高度发稿的放到大幅度放到官方刚发的的放到放到</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
            </table>
        </div>

    </body>

</html>
<script>
    var zdFixedTable = {
        fixedTableHeadByTableDivId: function(divId) {
            if (!divId) {
                return;
            }
            var tableDiv = $("#" + divId);
            var table = $("#" + divId + " table");
            this.unbindDivScroll(tableDiv);
            this.bindDivScroll(table, tableDiv);
        },
        setTheadWidth: function(table, tableDiv) {
            if (!table || !tableDiv) {
                return;
            }
            var tableBodyCell = table.find("tbody tr:first td");
            var headerCell = table.find("thead tr th");
            if (tableBodyCell && headerCell) {
                headerCell.each(function(index) {
                    $(this).width(tableBodyCell.eq(index).width());
                });
                tableBodyCell.each(function(index) {
                    $(this).width(headerCell.eq(index).width());
                });
            }
        },
        unbindDivScroll: function(tableDiv) {
            tableDiv.unbind("scroll");
        },
        bindDivScroll: function(table, tableDiv) {
            zdFixedTable.setTheadWidth(table, tableDiv);
            var timer;
            tableDiv.scroll(function() {
                clearTimeout(timer);
                timer = setTimeout(function() {
                    var tableHead = table.find("thead");
                    var windowTop = tableDiv.scrollTop();
                    var position = tableHead.css("position");
                    if (windowTop > 5) {
                        if ("fixed" != position) {
                            tableHead.css("position", "fixed");
                            tableHead.css("margin-top", "-1px");
                        }
                    } else {
                        if ("static" != position) {
                            tableHead.css("position", "static");
                            tableHead.css("margin-top", "0px");
                        }
                    }
                }, 200);
            });
        }
    }
    $(function() {
        zdFixedTable.fixedTableHeadByTableDivId("tebleDiv");
    });
</script>
复制代码

效果：

 

posted @   QiaoZhi  阅读(3097)  评论(0)  编辑  收藏  举报
编辑推荐：
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示