html Table實現表頭固定

bawn 發布于2019-08-30 15:55 / 3575人閱讀

摘要：點擊看效果合同號簽約客戶發布客戶合同狀態選定條件的發布周期額度看看其實關鍵之處在于使用了標簽，來對上下兩個表格的列寬進行了定義，讓他們保持一致。

點擊看效果


     
        
            
                合同號
                簽約客戶
                發布客戶
                合同狀態
                選定條件的發布周期額度

看看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;
    }

其實關鍵之處在于

1、使用了colgroup標簽，來對上下兩個表格的列寬進行了定義，讓他們保持一致。

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

只要保證上述兩點的話，你也可以做出固定表頭的表格來，同時不會發生上下的列不對齊的問題，屢試不爽！

GPU云服務器云服務器固定表頭html 固定表頭表格固定表頭 asp 表頭固定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117261.html

html Table實現表頭固定

摘要：點擊看效果合同號簽約客戶發布客戶合同狀態選定條件的發布周期額度看看其實關鍵之處在于使用了標簽，來對上下兩個表格的列寬進行了定義，讓他們保持一致。點擊看效果合同號簽約客戶發布客戶合同狀態 ...

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

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發過程...

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

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發過程...

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

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發過程...

張巨偉 2019-08-30 15:54 評論0 收藏0
一種局部固定表頭的實現方案（橫向可跟隨內容一同滾動，縱向鎖定表頭）

摘要：將設置為將和的放入一個的中，設置橫向軸可以滾動，軸不可滾動。表頭和表內容的橫向方向滾動能力其實是父級樣式賦予的。 1.為了固定表頭我們需要先把表格的head和tbody切分到兩個table里：和里。 2.將table-body放在一個table-body-box的div里設置y軸方向可以滾動，x軸方向不可滾動，這樣表內容就能在自己的區域實現垂直方向的滾動了。3.將table-hea...

zhkai 2019-08-02 15:59 評論0 收藏0