html Table實(shí)現(xiàn)表頭固定

bawn 發(fā)布于2019-08-30 15:55 / 3592人閱讀

摘要：點(diǎn)擊看效果合同號(hào)簽約客戶(hù)發(fā)布客戶(hù)合同狀態(tài)選定條件的發(fā)布周期額度看看其實(shí)關(guān)鍵之處在于使用了標(biāo)簽，來(lái)對(duì)上下兩個(gè)表格的列寬進(jìn)行了定義，讓他們保持一致。

點(diǎn)擊看效果


     
        
            
                合同號(hào)
                簽約客戶(hù)
                發(fā)布客戶(hù)
                合同狀態(tài)
                選定條件的發(fā)布周期額度

看看css

   *{
        padding:0;
        margin:0;
    }
    th{
        border:1px solid #e6e6e6;
        line-height: 5vh;
        color:#666666;
        font-size: 16px;
    }
    table {
        border-collapse: collapse;
        width: 100%;
    }
    td {
         padding:5px;
         border:1px solid #e6e6e6;
         font-size: 14px;
    }
    .table-head{padding-right:17px;background-color:rgb(207, 231, 179);color:#000;height:5vh;}
    .table-body{width:100%; height:94vh;overflow-y:scroll;}
    .table-head table,.table-body table{width:100%;}
    .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}

    .table-body table tr:hover {
        background-color:rgb(240, 249, 228);
        transition: .2s;
    }

其實(shí)關(guān)鍵之處在于

1、使用了colgroup標(biāo)簽，來(lái)對(duì)上下兩個(gè)表格的列寬進(jìn)行了定義，讓他們保持一致。

2、上邊的div .table-head添加了樣式padding-right:17px，這個(gè)寬度是為了保證跟下邊的div .table-body的滾動(dòng)條保持一致，同時(shí)下邊的表格.table-body添加了樣式overflow-y:scroll;

只要保證上述兩點(diǎn)的話，你也可以做出固定表頭的表格來(lái)，同時(shí)不會(huì)發(fā)生上下的列不對(duì)齊的問(wèn)題，屢試不爽！

云服務(wù)器 GPU云服務(wù)器固定表頭html 固定表頭表格固定表頭 asp 表頭固定

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117261.html

相關(guān)文章

html Table實(shí)現(xiàn)表頭固定

摘要：點(diǎn)擊看效果合同號(hào)簽約客戶(hù)發(fā)布客戶(hù)合同狀態(tài)選定條件的發(fā)布周期額度看看其實(shí)關(guān)鍵之處在于使用了標(biāo)簽，來(lái)對(duì)上下兩個(gè)表格的列寬進(jìn)行了定義，讓他們保持一致。點(diǎn)擊看效果合同號(hào) 簽約客戶(hù) 發(fā)布客戶(hù) 合同狀態(tài) ...

jcc 2019-08-02 14:07 評(píng)論0 收藏0
jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴(kuò)展的原生表格插件，設(shè)計(jì)理念來(lái)源于的組件該庫(kù)基于，暫時(shí)未找到版本因此在此造輪子。本文將記錄系列所有組件開(kāi)發(fā)過(guò)程中遇到的問(wèn)題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴(kuò)展的原生表格插件，設(shè)計(jì)理念來(lái)源于Element.ui的Table組件（該UI庫(kù)基于vue.js，暫時(shí)未找到j(luò)Query版本因此在此造輪子）。本文將記錄jsu系列所有組件開(kāi)發(fā)過(guò)程...

soasme 2019-08-02 16:07 評(píng)論0 收藏0
jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴(kuò)展的原生表格插件，設(shè)計(jì)理念來(lái)源于的組件該庫(kù)基于，暫時(shí)未找到版本因此在此造輪子。本文將記錄系列所有組件開(kāi)發(fā)過(guò)程中遇到的問(wèn)題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴(kuò)展的原生表格插件，設(shè)計(jì)理念來(lái)源于Element.ui的Table組件（該UI庫(kù)基于vue.js，暫時(shí)未找到j(luò)Query版本因此在此造輪子）。本文將記錄jsu系列所有組件開(kāi)發(fā)過(guò)程...

everfly 2019-08-23 14:05 評(píng)論0 收藏0
jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴(kuò)展的原生表格插件，設(shè)計(jì)理念來(lái)源于的組件該庫(kù)基于，暫時(shí)未找到版本因此在此造輪子。本文將記錄系列所有組件開(kāi)發(fā)過(guò)程中遇到的問(wèn)題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴(kuò)展的原生表格插件，設(shè)計(jì)理念來(lái)源于Element.ui的Table組件（該UI庫(kù)基于vue.js，暫時(shí)未找到j(luò)Query版本因此在此造輪子）。本文將記錄jsu系列所有組件開(kāi)發(fā)過(guò)程...

張巨偉 2019-08-30 15:54 評(píng)論0 收藏0
一種局部固定表頭的實(shí)現(xiàn)方案（橫向可跟隨內(nèi)容一同滾動(dòng)，縱向鎖定表頭）

摘要：將設(shè)置為將和的放入一個(gè)的中，設(shè)置橫向軸可以滾動(dòng)，軸不可滾動(dòng)。表頭和表內(nèi)容的橫向方向滾動(dòng)能力其實(shí)是父級(jí)樣式賦予的。 1.為了固定表頭我們需要先把表格的head和tbody切分到兩個(gè)table里：和里。 2.將table-body放在一個(gè)table-body-box的div里設(shè)置y軸方向可以滾動(dòng)，x軸方向不可滾動(dòng)，這樣表內(nèi)容就能在自己的區(qū)域?qū)崿F(xiàn)垂直方向的滾動(dòng)了。3.將table-hea...

zhkai 2019-08-02 15:59 評(píng)論0 收藏0