成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

jcc / 1777人閱讀

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

點(diǎn)擊看效果


     

        

            
                
合同號(hào)
                簽約客戶
                發(fā)布客戶
                合同狀態(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)題，屢試不爽！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/53589.html

相關(guān)文章

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

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

    bawn 評(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 評(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 評(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ò)程...

    張巨偉 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<