html Table實現表頭固定

最近一直在搞前台瑣碎的東西，也學習了一下linux，沒有時間對新的東西進行深入的研究和學習，沒有寫部落格，不過歸咎其原因還是在於自己的惰怠。

廢話不多說，今天想將乙個前台頁面設計的乙個小東西分享一下，那就是平時我們設計**的時候，通常都想將**的頭部進行固定，而**的body部分能夠進行滾動的效果，其實這個實現起來很簡單的，但是對於初學div+css布局的同學來說，還是有些幫助的。

先體驗一下操作感受：

序號內容 1

我只是用來測試的

2我只是用來測試的

3我只是用來測試的

4我只是用來測試的

5我只是用來測試的

6我只是用來測試的

7我只是用來測試的

8我只是用來測試的

9我只是用來測試的

10我只是用來測試的

11我只是用來測試的

12我只是用來測試的

13我只是用來測試的

14我只是用來測試的

15我只是用來測試的

馬上上**，首先看html

1
<
divstyle
="width: 800px;"
>
2<
divclass
="table-head"
>
3<
table
>
4<
colgroup
>
5<
colstyle
="width: 80px;"
/>
6<
col/>
7colgroup
>
8<
thead
>
9<
tr>
<
th>
序號th
>
<
th>
內容th
>
tr>
10thead
>
11table
>
12div
>
13<
divclass
="table-body"
>
14<
table
>
15<
colgroup
>
<
colstyle
="width: 80px;"
/>
<
col/>
colgroup
>
16<
tbody
>
17<
tr>
<
td>1td
>
<
td>
我只是用來測試的
td>
tr>
18<
tr>
<
td>2td
>
<
td>
我只是用來測試的
td>
tr>
19<
tr>
<
td>3td
>
<
td>
我只是用來測試的
td>
tr>
20<
tr>
<
td>4td
>
<
td>
我只是用來測試的
td>
tr>
21<
tr>
<
td>5td
>
<
td>
我只是用來測試的
td>
tr>
22<
tr>
<
td>6td
>
<
td>
我只是用來測試的
td>
tr>
23<
tr>
<
td>7td
>
<
td>
我只是用來測試的
td>
tr>
24<
tr>
<
td>8td
>
<
td>
我只是用來測試的
td>
tr>
25<
tr>
<
td>9td
>
<
td>
我只是用來測試的
td>
tr>
26<
tr>
<
td>
10td
>
<
td>
我只是用來測試的
td>
tr>
27<
tr>
<
td>
11td
>
<
td>
我只是用來測試的
td>
tr>
28<
tr>
<
td>
12td
>
<
td>
我只是用來測試的
td>
tr>
29<
tr>
<
td>
13td
>
<
td>
我只是用來測試的
td>
tr>
30<
tr>
<
td>
14td
>
<
td>
我只是用來測試的
td>
tr>
31<
tr>
<
td>
15td
>
<
td>
我只是用來測試的
td>
tr>
32tbody
>
33table
>
34div
>
35div
>

再看css如下

1 .table-head 2.table-body 3.table-head table,.table-body table 4.table-body table tr:nth-child(2n+1)

其實關鍵之處在於

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

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

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

參考**：

html Table實現表頭固定

HTML table表頭固定

excel表頭固定

GridView固定表頭

html Table實現表頭固定

HTML table表頭固定

excel表頭固定

GridView固定表頭

相關推薦