1. 程式人生 > >Table標題行凍結,資料行滾動的一種方式

Table標題行凍結,資料行滾動的一種方式

        這段時間在做Table標題行凍結,資料行滾動,雖然能實現,但也遇到一些問題,記錄下來。

        首先說說實現,實現其實不難,估計很多人都能想象出來,那就是標題行與內容行分離。我是這麼做的,用兩個表格,一個只有thead,一個只有tbody,兩個表格的列數量是完全相等的,而且相同的列寬度完全相等。這樣兩個表格合併在一起的時候,就感覺是一個表格一樣。

        但問題來了,就是當滾動條的時候,滾動條會佔掉一部分寬度,導致資料表的總寬變小,從而導致資料表每個單元格的寬度被不同程度擠壓,這樣,表頭與資料的邊框就無法對齊了。

        解決辦法是,在外層套一個DIV,overflow用hidden,然後把資料表的寬度設定為calc(100% + 16px),這樣,就把滾動條推到右邊去隱藏掉,從而表格單元格也正常了。