CSS樣式實現表頭和列固定

效果圖：第一行和第一列固定

>css實現表頭與列固定

title

script

src=""

script

style

.main

td,th

thtable

td:first-child,th:first-child

thead tr th

th:first-child

style

head

body

div

id>

div

class

="main"

table

cellspacing

="0"

thead

tr>

th>}

th>

th>標題2

th>

th>標題3

th>

th>標題4

th>

th>標題5

th>

th>標題6

th>

th>標題7

th>

th>標題8

th>

th>標題9

th>

th>標題10

th>

th>標題11

th>

th>標題12

th>

th>標題13

th>

th>標題14

th>

th>標題15

th>

tr>

thead

tbody

tr v-for

="(item,index) in 50"

:key

="index"

td>demo1

td>

td>demo2

td>

td>demo3

td>

td>demo4

td>

td>demo5

td>

td>demo6

td>

td>demo7

td>

td>demo8

td>

td>demo9

td>

td>demo10

td>

td>demo11

td>

td>demo12

td>

td>demo13

td>

td>demo14

td>

td>demo15

td>

tr>

tbody

table

div>

body

script

var=

newvue(,

methods:}})

script

html

css樣式介紹：

1、overflow 屬性規定當內容溢位元素框時發生的事情。

值描述

visible 預設值。內容不會被修剪，會呈現在元素框之外。

hidden 內容會被修剪，並且其餘內容是不可見的。

scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。

auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。

inherit 規定應該從父元素繼承 overflow 屬性的值。

案例： .main2、table-layout:fixed;

值描述

automatic 預設。列寬度由單元格內容設定。

fixed 列寬由**寬度和列寬度設定。

inherit 規定應該從父元素繼承 table-layout 屬性的值。

案例： table3、position 屬性指定了元素的定位型別

static：html 元素的預設值，即沒有定位，遵循正常的文件流物件。靜態定位的元素不會受到 top, bottom, left, right影響。

fixed：元素的位置相對於瀏覽器視窗是固定位置。即使視窗是滾動的它也不會移動：fixed定位使元素的位置與文件流無關，因此不佔據空間。

fixed定位的元素和其他元素重疊。

relative：相對定位元素的定位是相對其正常位置。

absolute：絕對定位的元素的位置相對於最近的已定位父元素，

如果元素沒有已定位的父元素，那麼它的位置相對於:

sticky：sticky 英文本面意思是粘，貼上，所以可以把它稱之為粘性定位。

指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。

z-index屬性：指定了乙個元素的堆疊順序。乙個元素可以有正數或負數的堆疊順序

案例：

td:first-child,th:first-child

4、語法：box-shadow: h-shadow v-shadow blur spread color inset;

值說明

h-shadow 必需的。水平陰影的位置。允許負值

v-shadow 必需的。垂直陰影的位置。允許負值

blur 可選。模糊距離

spread 可選。陰影的大小

color 可選。陰影的顏色。在css顏色值尋找顏色值的完整列表

inset 可選。從外層的陰影（開始時）改變陰影內側陰影

案例：.table-responsive .o_list_table thead tr:nth-child(1) th:nth-child()

CSS樣式實現表頭和列固定

css固定表頭和列

固定表頭和列

Table固定表頭和列

CSS樣式實現表頭和列固定

css固定表頭和列

固定表頭和列

Table固定表頭和列

相關推薦