css样式固定表头表体可以滑动_一种固定表格上表头和左表头的方法

最新推荐文章于 2022-10-08 10:06:17 发布

weixin_39979489

最新推荐文章于 2022-10-08 10:06:17 发布

阅读量349

点赞数

文章标签： css样式固定表头表体可以滑动

本文链接：https://blog.csdn.net/weixin_39979489/article/details/111623565

版权

效果

本文提供一种基于jquery的固定表格上表头和左表头的方法。运行效果如下：

思路

1、监听某个元素的滚动条事件

$(selector).scroll(function () {...})

2、获取滚动条滚动的距离

$(selector).scrollLeft()

$(selector).scrollTop()

3、根据滚动距离调整表头的相对位置

$(selector).css({"position":"relative","left":"...","z-index":"..."});

$(selector).css({"position":"relative","top":"...","z-index":"..."});

注：表头元素应采用相对位置。

实现

该功能的实现过程较为简单，主要由fixTableHead.html文件、fixTableHead.css文件和fixTableHead.js组成。具体代码如下：

1、fixTableHead.html文件

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定表格的上表头和左表头title>
    <link rel="stylesheet" href="./fixTableHead.css" type="text/css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript">script>
    <script src="./fixTableHead.js" type="text/javascript">script>
head>
<body>
    <div id="tableBox">
        <table id="myTable">
            <tr id="tableHeadTopTr">
                <th id="trHead">
                    <div>序号div>
                th>
                <th class="tableHeadTop">
                    <div>姓名div>
                th>
                <th class="tableHeadTop">
                    <div>年龄div>
                th>
                <th class="tableHeadTop">
                    <div>班级div>
                th>
                <th class="tableHeadTop">
                    <div>语文div>
                th>
                <th class="tableHeadTop">
                    <div>数学div>
                th>
                <th class="tableHeadTop">
                    <div>英语div>
                th>
                <th class="tableHeadTop">
                    <div>物理div>
                th>
                <th class="tableHeadTop">
                    <div>化学div>
                th>
                <th class="tableHeadTop">
                    <div>生物div>
                th>                
            tr>
            <tr class="tableTr">
                
                <td class="tableHeadLeft">
                    <div>1div>
                td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr class="tableTr">
                
                <td class="tableHeadLeft">
                    <div>2div>
                td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr class="tableTr">
                
                <td class="tableHeadLeft">
                    <div>3div>
                td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr class="tableTr">
                
                <td class="tableHeadLeft">
                    <div>4div>
                td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr class="tableTr">
                
                <td class="tableHeadLeft">
                    <div>5div>
                td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr class="tableTr">
                
                <td class="tableHeadLeft">
                    <div>6div>
                td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr class="tableTr">
                
                <td class="tableHeadLeft">
                    <div>7div>
                td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
        table>
    div>
body>
html>

2、fixTableHead.css文件

#tableBox{
    width: 600px;
    height: 300px;
    /* 滚动条自适应 */
    overflow-x: auto;
    overflow-y: auto;
}
table{
    /* 屏蔽表格默认样式 */
    border-spacing: unset;
}
#myTable{
   background-color: white
}
table tr th, table tr td{
    min-width: 100px;
    height: 50px;
    border: 1px solid lightgrey
}
#trHead{
    background-color: lightcoral
}
.tableHeadTop{
    background-color: aquamarine
}
.tableHeadLeft{
    background-color: aquamarine
}

3、fixTableHead.js文件

$(document).ready(function() {
    // 当父元素滚动条滚动时
    $("#tableBox").scroll(function () {
        // 遍历每一行
        $("#myTable tr").each(function () {
            // 取每一行第一个元素，即左表头，根据滚动距离调整相对距离
            $(this).children().first().css({"position":"relative","left":$("#tableBox").scrollLeft(),"z-index":"2"});
        });
        // 上表头根据滚动距离调整相对位置
        $(".tableHeadTop").css({"position":"relative","top":$("#tableBox").scrollTop(),"z-index":"3"});
        // 重置左上角位置
        $("#trHead").css({"position":"relative","top":$("#tableBox").scrollTop(),"left":$("#tableBox").scrollLeft(),"z-index":"4"})
    });
});