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

2022-08-29 12:33:17 字數 371 閱讀 2487

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

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

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

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

table中的標題行凍結的簡單實現

這裡只是簡單的實現,主要是用了position屬性的fixed屬性值,這個屬性值需要高版本瀏覽器的支援,如果要相容低版本的瀏覽器可以通過寫指令碼的方式實現,也可以使用ui庫,有些ui庫裡面 外掛程式的標題行都是凍結的。這裡只介紹使用fixed的方法 class freezediv style wid...

凍結列或行

1 列凍結datagridviewcolumn.frozen 屬性為true 時,該列左側的所有列被固定,橫向滾動時固定列不隨滾動條滾動而左右移動。這對於重要列固定顯示很有用。vb.net datagridview1的左側2列固定datagridview1.columns 1 frozen true...

DataGridView 凍結列或行

1 列凍結 datagridviewcolumn.frozen 屬性為true 時,該列左側的所有列被固定,橫向滾動時固定列不隨滾動條滾動而左右移動。這對於重要列固定顯示很有用。vb.net datagridview1 的左側2 列固定datagridview1.columns 1 frozen t...