HTML table表頭固定

2022-05-08 12:48:12 字數 2207 閱讀 7171

說說我在最近專案中碰到的css問題吧,作為問題知識集合總結筆記:

序號內容

1我只是用來測試的

2我只是用來測試的

3我只是用來測試的

4我只是用來測試的

5我只是用來測試的

6我只是用來測試的

7我只是用來測試的

8我只是用來測試的

順便做做筆記說說px、em、rem的區別:

px是固定的畫素,一旦設定了就無法因為適應頁面大小而改變。

em和rem相對於px更具有靈活性,他們是相對長度單位,意思是長度不是定死了的,更適用於響應式布局。

對於em和rem的區別一句話概括:em相對于父元素大小,rem相對於根元素大小(html元素)。

rem中的r意思是root(根源),這也就不難理解了。

em/rem:用於做響應式頁面,不過我更傾向於rem,因為em不同元素的參照物不一樣(都是該元素父元素),所以在計算的時候不方便,相比之下rem就只有乙個參照物(html元素),這樣計算起來更清晰。

webkit支援擁有overflow屬性的區域,列表框,下拉列表,textarea的滾動條自定義樣式,所以用處還是挺大的。當然,相容所有瀏覽器的滾動條樣式目前是不存在的。

css美化瀏覽器預設滾動條樣式:

::-webkit-scrollbar 

::-webkit-scrollbar-thumb

::-webkit-scrollbar-thumb:hover

::-webkit-scrollbar-track-piece

給某個div加滾動條設定:

.test1::-webkit-scrollbar 

.test1::-webkit-scrollbar-track

.test1::-webkit-scrollbar-thumb

demo樣例:

/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/

::-webkit-scrollbar

/*定義滾動條軌道 內陰影+圓角*/

::-webkit-scrollbar-track

/*定義滑塊 內陰影+圓角*/

::-webkit-scrollbar-thumb

具體更多樣例可以參照

:horizontal

//horizontal偽類適用於任何水平方向上的滾動條

:vertical

//vertical偽類適用於任何垂直方向的滾動條

:decrement

//decrement偽類適用於按鈕和軌道碎片。表示遞減的按鈕或軌道碎片,例如可以使區域向上或者向右移動的區域和按鈕

:increment

//increment偽類適用於按鈕和軌道碎片。表示遞增的按鈕或軌道碎片,例如可以使區域向下或者向左移動的區域和按鈕

:start

//start偽類適用於按鈕和軌道碎片。表示物件(按鈕 軌道碎片)是否放在滑塊的前面

:end

//end偽類適用於按鈕和軌道碎片。表示物件(按鈕 軌道碎片)是否放在滑塊的後面

:double-button

//double-button偽類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。也就是軌道碎片緊挨著一對在一起的按鈕。

:single-button

//single-button偽類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是乙個按鈕。也就是軌道碎片緊挨著乙個單獨的按鈕。

:no-button

no-button偽類表示軌道結束的位置沒有按鈕。

:corner-present

//corner-present偽類表示滾動條的角落是否存在。

:window-inactive

//適用於所有滾動條,表示包含滾動條的區域,焦點不在該視窗的時候。

::-webkit-scrollbar-track-piece:start

::-webkit-scrollbar-thumb:window-inactive

::-webkit-scrollbar-button:horizontal:decrement:hover

偽類與偽元素區別:

參照:

html Table實現表頭固定

最近一直在搞前台瑣碎的東西,也學習了一下linux,沒有時間對新的東西進行深入的研究和學習,沒有寫部落格,不過歸咎其原因還是在於自己的惰怠。廢話不多說,今天想將乙個前台頁面設計的乙個小東西分享一下,那就是平時我們設計 的時候,通常都想將 的頭部進行固定,而 的body部分能夠進行滾動的效果,其實這個...

excel表頭固定

當我們編輯過長或過寬的excel工作表時,需要向下或向上滾動螢幕。這時,表頭也會相應滾動,不能在螢幕上顯示,於是我們不清楚要編輯的資料對應 於表頭的哪乙個資訊。按下列方法,可以使表頭鎖定,始終位於螢幕上的可 視區域。首先選定要鎖定的表頭,如果我們要將圖中的 1 3行 鎖定,那麼單擊a4單 元格,然後...

GridView固定表頭

gridview固定表頭 title style type text css freezing freezing th style head body form id form1 runat server divstyle overflow y scroll height 200px width 5...