前端html之 Table實現表頭固定

2022-01-28 16:56:53 字數 3396 閱讀 8985

說明:這裡主要實現了表頭的固定和上下滾動的滑動實現;時間的原因未對左右滑動進行實現學習和總結,後續會對左右滑動進行實現。

一、先上**:

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

title

>**頭部固定

title

>

<

style

type

="text/css"

>

.table-head table,.table-body table

.table-head

.table-body

.table-body table tr:nth-child(2n+1)

.table-body table tr td

style

>

head

>

<

body

>

<

div

style

="width:100%;"

>

<

div

class

="table-head"

>

<

table

>

<

colgroup

><

col

span

="2"

style

="width: 100px;"

/><

col

/>

colgroup

>

<

thead

>

<

tr>

<

th>序號

th>

<

th>內容

th>

tr>

thead

>

table

>

div>

<

div

class

="table-body"

>

<

table

>

<

colgroup

><

col

span

="2"

style

="width: 100px;"

/><

col

/>

colgroup

>

<

tbody

>

<

tr><

td>1

td><

td>我只是用來測試的

td>

tr>

<

tr><

td>2

td><

td>我只是用來測試的

td>

tr>

<

tr><

td>3

td><

td>我只是用來測試的

td>

tr>

<

tr><

td>4

td><

td>我只是用來測試的

td>

tr>

<

tr><

td>5

td><

td>我只是用來測試的

td>

tr>

<

tr><

td>6

td><

td>我只是用來測試的

td>

tr>

<

tr><

td>7

td><

td>我只是用來測試的

td>

tr>

<

tr><

td>8

td><

td>我只是用來測試的

td>

tr>

<

tr><

td>9

td><

td>我只是用來測試的

td>

tr>

<

tr><

td>10

td><

td>我只是用來測試的

td>

tr>

<

tr><

td>11

td><

td>我只是用來測試的

td>

tr>

<

tr><

td>12

td><

td>我只是用來測試的

td>

tr>

<

tr><

td>13

td><

td>我只是用來測試的

td>

tr>

<

tr><

td>14

td><

td>我只是用來測試的

td>

tr>

<

tr><

td>15

td><

td>我只是用來測試的

td>

tr>

tbody

>

table

>

div>

div>

body

>

html

>

二、演示:

序號內容

1我只是用來測試的

2我只是用來測試的

3我只是用來測試的

4我只是用來測試的

5我只是用來測試的

6我只是用來測試的

7我只是用來測試的

8我只是用來測試的

9我只是用來測試的

10我只是用來測試的

11我只是用來測試的

12我只是用來測試的

13我只是用來測試的

14我只是用來測試的

15我只是用來測試的

三、注意:

其實關鍵之處在於

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

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

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

動態建立HTML之Table

在頁面上的html伺服器控牛的宣告和普通的靜態html標籤的宣告一樣,使用附加的runat server 特性,充高爾夫asp.net處理伺服器類,並把它們翻譯成對應的.net類的例項。在page load事件中新增如下 protected void page load object sender,...

前端基礎之HTML

html 作為超文字標記語言主要是用來製作靜態頁面 html有標準 html4 標籤 原生標籤.標籤 橫線.結構標籤 字型標籤 使用 文字 標籤的屬性 標籤 屬性名 屬性值 屬性名 屬性值 段落標籤 p標籤 字型加粗標籤 b標籤 字型斜體標籤 i標籤 字型下劃線 u標籤 居中標籤 標籤 html的標...

前端基礎之HTML

目錄web服務的本質 響應格式 響應狀態碼 請求方式 post請求 xml也可以書寫前端頁面,主要用於odoo框架中,書寫企業內部管理軟體 html注釋 由於html頁面結構比較複雜,內容比較多,不便於後期的維護,修改,通常在寫頁面的時候,習慣用下面的方式來人為的劃分 區域 html文件結構 hea...