首页 前端知识 table固定首行首列css 最简单方法(亲测可用)

table固定首行首列css 最简单方法(亲测可用)

2024-06-01 10:06:14 前端知识 前端哥 278 312 我要收藏

 

业务需要前端使用html 写了个table 如图: 需要滚动条上下左右滑动,但是固定首航首列

 

关键代码: 

 /* 首列固定 */

    .table-container thead tr > td:first-child,
    .table-container tbody tr > td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: #ececec;
    }

    /* 表头固定 */
    .table-container thead tr > td {
        position: sticky;
        top: 0;
        z-index: 2;
    }


    /* 表头首列强制最顶层 */
    .table-container thead tr > td:first-child {
        z-index: 3;
    }

 解析:关键属性 css : 

在 视口滚动到元素 top 距离小于 0px 之前,元素为相对定位。之后,元素将固定在与顶部距离 0px 的位置,直到视口回滚到阈值以下;

同理

在 视口滚动到元素 left距离小于 0px 之前,元素为相对定位。之后,元素将固定在与左边距离 0px 的位置,直到视口回滚到阈值以下;

粘性定位 - position: sticky

粘性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。例如:

全部代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
 <style>
    .payedColor{
        color: #2eb132;
    }
    .grayColor{
        color: #c3afaf;
    }
    table {
        font-size: 0.85rem;
        color: #646566;
        border-spacing: 0;
    }
    table .table-header {
        height: 1.75rem;
        line-height: 1.75rem;
    }
    table .table-row {
        height: 1.75rem;
        line-height: 1.75rem;
    }
    .table-row > td {
        padding: 0 0.25rem;
        white-space: nowrap;
        border-right: 0.05rem solid #c1c1c1;
        border-bottom: 0.05rem solid #c1c1c1;
    }
    .table-row:first-child > td {
        border-top: 0.05rem solid #c1c1c1;
    }
    .table-row > td:first-child {
        border-left: 0.05rem solid #c1c1c1;
        vertical-align:middle;
    }
    .table-container {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    /* 首列固定 */

    .table-container thead tr > td:first-child,
    .table-container tbody tr > td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: #ececec;
    }

    /* 表头固定 */
    .table-container thead tr > td {
        position: sticky;
        top: 0;
        z-index: 2;
    }


    /* 表头首列强制最顶层 */
    .table-container thead tr > td:first-child {
        z-index: 3;
    }

    .flex-row {
        margin: 0 -0.25rem;
        padding: 0.25rem;
    }
    .flex-row > div:first-child {
        margin-right: 0.5rem;
    }
    input[type=date]::-webkit-clear-button {
        visibility: hidden; /** 去掉日期控件清除按钮*/
    }

    .card-content {
        display: flex;
        flex-direction: column;
        width: 90%;
        min-height: 75px;
        margin: 15px auto 0;
        padding: 10px 0;
        border-radius: 10px;
        box-shadow: 1px 1px 10px -1px #9b9b9b;
        font-size: 1.2rem;
        background-color: #FFFFFF;
    }

    input[type=date] {
        width: 65%;
        border-radius: 5px;
        border: 1px solid grey;
        padding-left: 10px;
    }

    .van-field__body {
        height: 100%;
    }

    .btn-div{
        width: 100%;
        margin: 30px auto 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .btn-common{
        width: 30%;
        height: 35px;
        border-radius: 16px;
        padding: 6px 0;
        color: #ffffff;
        background: linear-gradient(to right, #fa8082, #f6a240);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
    }
    .van-field__label {
        display: flex;
        align-items: center;
    }

    .dropdown-menu > .active > a {
        background-color: #ff8e31;
    }

    .weui-cell__bd > label{
        width: 42%;
    }
</style>

</head>

<body>
  
    <div class="table-container" style="width: 14%; height: 482px; margin: auto; overflow: auto">
                <table class="table table-bordered" style="text-align: center">
                    <thead>
                    <tr class="table-row table-header">
                        <td scope="col">楼层</td>
                            <td scope="col">1单元01号</td>
                            <td scope="col">1单元02号</td>
                            <td scope="col">2单元01号</td>
                            <td scope="col">2单元02号</td>
                           
                    </tr>
                    </thead>
                        <tbody><tr class="table-row">
                            <td scope="col">30楼</td>
                             <td>
                                        <div class="grayColor">
                                          <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)">
                                               <div>孙悟空</div>
                                                <div>已交费</div>
                                               <div>3001</div>
                                          </div>
                                        </div>
                             </td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                                 
                                                  <div>猪八戒</div>
                                                      
                                                  <div>已交费</div>
                                                  <div>3002</div>
                                             </div>
                                         </div>
                             </td>
                             <td>
                                        <div class="grayColor">
                                          <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)">
                                               
                                               <div>沙和尚</div>
                                                
                                               <div>未交费</div>
                                               <div>3001</div>
                                          </div>
                                        </div>
                             </td>
                             <td>
                                        <div class="grayColor">
                                          <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)">
                                               
                                               <div>唐三藏</div>
                                               
                                               <div>未交费</div>
                                               <div>3002</div>
                                          </div>
                                        </div>
                             </td>
                        </tr>
                        <tr class="table-row">
                            <td scope="col">29楼</td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                                  
                                                  <div>公孙离</div>
                                                       
                                                  <div>已交费</div>
                                                  <div>2901</div>
                                             </div>
                                         </div>
                             </td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                                 
                                                  <div>李元芳</div>
                                                       
                                                        
                                                  <div>已交费</div>
                                                  <div>2902</div>
                                             </div>
                                         </div>
                             </td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                                  
                                                  <div>赵怀真</div>
                                                       
                                                  <div>已交费</div>
                                                  <div>2901</div>
                                             </div>
                                         </div>
                             </td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                                 
                                                  <div>夏洛特</div>
                                                        
                                                  <div>已交费</div>
                                                  <div>2902</div>
                                             </div>
                                         </div>
                             </td>
                        </tr>
                        <tr class="table-row">
                            <td scope="col">28楼</td>
                             <td>
                                        <div class="grayColor">
                                          <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)">
                                              
                                               <div>诸葛亮</div>
                                            
                                               <div>未交费</div>
                                               <div>2801</div>
                                          </div>
                                        </div>
                             </td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                                
                                                  <div>周瑜</div>
                                                       
                                                  <div>已交费</div>
                                                  <div>2802</div>
                                             </div>
                                         </div>
                             </td>
                             <td>
                                        <div class="grayColor">
                                          <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)">
                                               
                                               <div>小乔</div>
                                                
                                               <div>未交费</div>
                                               <div>2801</div>
                                          </div>
                                        </div>
                             </td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                                 
                                                  <div>东方要</div>
                                                        
                                                  <div>已交费</div>
                                                  <div>2802</div>
                                             </div>
                                         </div>
                             </td>
                        </tr>
                        <tr class="table-row">
                            <td scope="col">27楼</td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                                 
                                                  <div>程咬金</div>
                                                       
                                                  <div>已交费</div>
                                                  <div>2701</div>
                                             </div>
                                         </div>
                             </td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                               
                                                  <div>哪吒</div>
                                                        
                                                  <div>已交费</div>
                                                  <div>2702</div>
                                             </div>
                                         </div>
                             </td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                                 
                                                  <div>杨戬</div>
                                                        
                                                  <div>已交费</div>
                                                  <div>2701</div>
                                             </div>
                                         </div>
                             </td>
                             <td>
                                        <div class="grayColor">
                                          <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)">
                                               
                                               <div>孙尚香</div>
                                                
                                               <div>未交费</div>
                                               <div>2702</div>
                                          </div>
                                        </div>
                             </td>
                        </tr>

  <tr class="table-row">
                            <td scope="col">26楼</td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                                 
                                                  <div>程咬金</div>
                                                       
                                                  <div>已交费</div>
                                                  <div>2701</div>
                                             </div>
                                         </div>
                             </td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                               
                                                  <div>哪吒</div>
                                                        
                                                  <div>已交费</div>
                                                  <div>2702</div>
                                             </div>
                                         </div>
                             </td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                                 
                                                  <div>杨戬</div>
                                                        
                                                  <div>已交费</div>
                                                  <div>2701</div>
                                             </div>
                                         </div>
                             </td>
                             <td>
                                        <div class="grayColor">
                                          <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)">
                                               
                                               <div>孙尚香</div>
                                                
                                               <div>未交费</div>
                                               <div>2702</div>
                                          </div>
                                        </div>
                             </td>
                        </tr>
  <tr class="table-row">
                            <td scope="col">25楼</td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                                 
                                                  <div>程咬金</div>
                                                       
                                                  <div>已交费</div>
                                                  <div>2701</div>
                                             </div>
                                         </div>
                             </td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                               
                                                  <div>哪吒</div>
                                                        
                                                  <div>已交费</div>
                                                  <div>2702</div>
                                             </div>
                                         </div>
                             </td>
                             <td>
                                         <div class="payedColor">
                                             <div class="flex-row" onclick="chooseHouse(this)">
                                                 
                                                  <div>杨戬</div>
                                                        
                                                  <div>已交费</div>
                                                  <div>2701</div>
                                             </div>
                                         </div>
                             </td>
                             <td>
                                        <div class="grayColor">
                                          <div class="flex-row" style="padding: 0 1.25rem;" onclick="chooseHouse(this)">
                                               
                                               <div>孙尚香</div>
                                                
                                               <div>未交费</div>
                                               <div>2702</div>
                                          </div>
                                        </div>
                             </td>
                        </tr>
              
                       </tbody></table>
            </div>
</body>
<script src="http://s.yidaichu.com/r/libs/js/jquery-3.1.1.min.js"></script>
<script>

</script>

</html>

 

兼容性问题: 

该属性非常好用但是各大浏览器厂商不以为意,有兼容性得小伙伴请注意下自己业务使用哪种浏览器浏览

IOS 家族(SAFARI && IOS SAFARI)和 Firefox 很早开始就支持 position:sticky 了。而 Chrome53~55 则需要启用实验性网络平台功能才行。其中 webkit 内核的要添加上私有前缀 -webkit-

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10452.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!