纯CSS表头固定的实现代码

纯CSS实现表头固定之所以难，主要在两点。一是占有最大市场份额的IE6不支持position:fixed。另一个，是人们想破头都想在一起表格中实现这种效果。不过外国真的人用纯CSS实现了这种效果，动用了数量惊人的CSS hacks……我觉得，如果搞到代码如此难懂且难扩展，还不如用javascript好了。碰巧今天我也遇到这种需求，换个视角想想，真的搞出来了。

我们知道，CSS是负责表现，HTML是负责结构，同样的结构，换个样式，给人的感觉完全不同，这也说明人的眼睛是很容易受骗。因此前些狂热鼓吹DIV+CSS的日子里，人们总是想在页面去掉table，用div+span弄出了一个个“table”来。虽然这种事是不可取，但也告诉我们，table做得的事，通过一些组合我们也能做出来。换个思路来说，既然一个table做不了，就两个吧。上面的table模拟表头，下面的table模拟带滚动条的部分。在我们继续讲下去之前，我们先明确一下我们的需求吧，要不太抽象了。首先是表格为4*9,每列宽170px,总为680px，滚动条在各浏览器默认为16px，别忘了，width是不包含border在内，四列就有5个纵向的border，宽总长为701px。

1. <table >
2. <tr>
3. <td>&nbsp;</td>
4. <td>&nbsp;</td>
5. <td>&nbsp;</td>
6. <td>&nbsp;</td>
7. </tr>
8. <tr>
9. <td>&nbsp;</td>
10. <td>&nbsp;</td>
11. <td>&nbsp;</td>
12. <td>&nbsp;</td>
13. </tr>
14. <tr>
15. <td>&nbsp;</td>
16. <td>&nbsp;</td>
17. <td>&nbsp;</td>
18. <td>&nbsp;</td>
19. </tr>
20. <tr>
21. <td>&nbsp;</td>
22. <td>&nbsp;</td>
23. <td>&nbsp;</td>
24. <td>&nbsp;</td>
25. </tr>
26. <tr>
27. <td>&nbsp;</td>
28. <td>&nbsp;</td>
29. <td>&nbsp;</td>
30. <td>&nbsp;</td>
31. </tr>
32. <tr>
33. <td>&nbsp;</td>
34. <td>&nbsp;</td>
35. <td>&nbsp;</td>
36. <td>&nbsp;</td>
37. </tr>
38. <tr>
39. <td>&nbsp;</td>
40. <td>&nbsp;</td>
41. <td>&nbsp;</td>
42. <td>&nbsp;</td>
43. </tr>
44. <tr>
45. <td>&nbsp;</td>
46. <td>&nbsp;</td>
47. <td>&nbsp;</td>
48. <td>&nbsp;</td>
49. </tr>
50. <tr>
51. <td>&nbsp;</td>
52. <td>&nbsp;</td>
53. <td>&nbsp;</td>
54. <td>&nbsp;</td>
55. </tr>
56. </table>

然后我们把这个table一分为二，第一个table为表头，第二个table要带滚动条，说明要在其父元素上应用overflow样式，因此它要外套一个div。这个div与第一个table应该是等长的。不过不用花心思了，我们在它们的外面最套一个div，设置其width为701px，然后把这两个子元素的宽都设为100%就行了。注意，我们在table中显式添加tbody以提高表格的渲染效率。

1. <div id="scrollTable">
2. <table class="thead">
3. <tbody>
4. <tr>
5. <th>名称</th>
6. <th>语法</th>
7. <th>说明</th>
8. <th>例子</th>
9. </tr>
10. </tbody>
11. </table>
12. <div>
13. <table class="tbody">
14. <tbody>
15. <tr>
16. <td>Simple attribute Selector</td>
17. <td>[attr] </td>
18. <td>选择具有此属性的元素</td>
19. <td>blockquote[title] { <br/>color: red }</td>
20. </tr>
21. <tr>
22. <td>attribute Value Selector</td>
23. <td>[attr="value"] </td>
24. <td>选出属性值精确等于给出值的元素</td>
25. <td>h2[align="left"] { <br/>cursor: hand } </td>
26. </tr>
27. <tr>
28. <td>"Begins-with" attribute Value Selector</td>
29. <td>[attr^="value"] </td>
30. <td>选出属性值以给出值开头的元素</td>
31. <td>h2[align^="right"] { <br/>cursor: hand } </td>
32. </tr>
33. <tr>
34. <td>"Ends-with" attribute Value Selector</td>
35. <td>[attr$="value"] </td>
36. <td>选出属性值以给出值结尾的元素</td>
37. <td>div[class$="vml"]{<br/>cursor: hand} </td>
38. </tr>
39. <tr>
40. <td>Substring-match attribute Value Selector</td>
41. <td>[attr*="value"] </td>
42. <td>选出属性值包含给出值的元素</td>
43. <td>div[class*="grid"]{<br/> float:left} </td>
44. </tr>
45. <tr>
46. <td>One-Of-Many Attribute Value Selector</td>
47. <td>[attr~="value"] </td>
48. <td>原元素的属性值为多个单词，给出值为其中一个。</td>
49. <td>li[class~="last"]{<br/> padding-left:2em} </td>
50. </tr>
51. <tr>
52. <td>Hyphen Attribute Value Selector</td>
53. <td>[attr|="value"] </td>
54. <td>原元素的属性值等于给出值，或者以给出值加“-”开头</td>
55. <td>span[lang|="en"]{ <br/>color:green}</td>
56. </tr>
57. <tr>
58. <td>反选属性值选择器</td>
59. <td>[attr!="value"] </td>
60. <td>非标准，jQuery中出现的</td>
61. <td>span[class!="red"]{<br/>color:green}</td>
62. </tr>
63. </tbody>
64. </table>
65. </div>
66. </div>

表现层部分：

1. #scrollTable {
2. width:701px;
3. border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
4. background: #FF8C00;
5. }
6.  
7.  
8. #scrollTable table {
9. border-collapse:collapse; /*统一设置两个table为细线表格*/
10. }
11.  
12. #scrollTable table.thead{ /*表头*/
13. /*div的第一个子元素*/
14. width:100%;
15. }
16.  
17. #scrollTable table.thead th{/*表头*/
18. border: 1px solid #EB8;
19. border-right:#C96;
20. color:#fff;
21. background: #FF8C00;/*亮桔黄色*/
22. }
23.  
24. #scrollTable div{/*能带滚动条的表身*/
25. /*div的第二个子元素*/
26. width:100%;
27. height:200px;
28. overflow:auto;/*必需*/
29. }
30.  
31. #scrollTable table.tbody{/*能带滚动条的表身的正体*/
32. width:100%;
33. border: 1px solid #C96;
34. border-right:#B74;
35. color:#666666;
36. background: #ECE9D8;
37. }
38. #scrollTable table.tbody td{/*能带滚动条的表身的格子*/
39. border:1px solid #C96;
40. }

运行代码：

1. <!doctype html>
2. <html dir="ltr" lang="zh-CN">
3. <head>
4. <meta charset="utf-8"/>
5. <title>纯CSS实现表头固定</title>
6. <style type="text/css">
7.  
8. #scrollTable {
9. width:701px;
10. border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
11. background: #FF8C00;
12. }
13.  
14.  
15. #scrollTable table {
16. border-collapse:collapse; /*统一设置两个table为细线表格*/
17. }
18.  
19. #scrollTable table.thead{ /*表头*/
20. /*div的第一个子元素*/
21. width:100%;
22. }
23.  
24. #scrollTable table.thead th{/*表头*/
25. border: 1px solid #EB8;
26. border-right:#C96;
27. color:#fff;
28. background: #FF8C00;/*亮桔黄色*/
29. }
30.  
31. #scrollTable div{/*能带滚动条的表身*/
32. /*div的第二个子元素*/
33. width:100%;
34. height:200px;
35. overflow:auto;/*必需*/
36. }
37.  
38. #scrollTable table.tbody{/*能带滚动条的表身的正体*/
39. width:100%;
40. border: 1px solid #C96;
41. border-right:#B74;
42. color:#666666;
43. background: #ECE9D8;
44. }
45. #scrollTable table.tbody td{/*能带滚动条的表身的格子*/
46. border:1px solid #C96;
47. }
48.  
49. </style>
50. </head>
51. <body>
52. <div id="scrollTable">
53. <table class="thead">
54.  
55. <tbody>
56. <tr>
57. <th>名称</th>
58. <th>语法</th>
59. <th>说明</th>
60. <th>例子</th>
61. </tr>
62. </tbody>
63. </table>
64. <div>
65. <table class="tbody">
66.  
67. <tbody>
68. <tr>
69. <td>Simple attribute Selector</td>
70. <td>[attr] </td>
71. <td>选择具有此属性的元素</td>
72. <td>blockquote[title] { <br/>color: red }</td>
73. </tr>
74. <tr>
75. <td>attribute Value Selector</td>
76. <td>[attr="value"] </td>
77. <td>选出属性值精确等于给出值的元素</td>
78. <td>h2[align="left"] { <br/>cursor: hand } </td>
79. </tr>
80. <tr>
81. <td>"Begins-with" attribute Value Selector</td>
82. <td>[attr^="value"] </td>
83. <td>选出属性值以给出值开头的元素</td>
84. <td>h2[align^="right"] { <br/>cursor: hand } </td>
85. </tr>
86. <tr>
87. <td>"Ends-with" attribute Value Selector</td>
88. <td>[attr$="value"] </td>
89. <td>选出属性值以给出值结尾的元素</td>
90. <td>div[class$="vml"]{<br/>cursor: hand} </td>
91. </tr>
92. <tr>
93. <td>Substring-match attribute Value Selector</td>
94. <td>[attr*="value"] </td>
95. <td>选出属性值包含给出值的元素</td>
96. <td>div[class*="grid"]{<br/> float:left} </td>
97. </tr>
98. <tr>
99. <td>One-Of-Many Attribute Value Selector</td>
100. <td>[attr~="value"] </td>
101. <td>原元素的属性值为多个单词，给出值为其中一个。</td>
102. <td>li[class~="last"]{<br/> padding-left:2em} </td>
103. </tr>
104. <tr>
105. <td>Hyphen Attribute Value Selector</td>
106. <td>[attr|="value"] </td>
107. <td>原元素的属性值等于给出值，或者以给出值加“-”开头</td>
108. <td>span[lang|="en"]{ <br/>color:green}</td>
109. </tr>
110. <tr>
111. <td>反选属性值选择器</td>
112. <td>[attr!="value"] </td>
113. <td>非标准，jQuery中出现的</td>
114. <td>span[class!="red"]{<br/>color:green}</td>
115. </tr>
116. </tbody>
117. </table>
118. </div>
119. </div>
120.  
121.  
122. </body>
123. </html>

发现表头的格子与表身的格子不对齐。这时我们需要动用col标签，col允许我们统一设置tbody中索引值与它相同的td或th的背景色，文字对齐方式与宽度。虽然CSS2.1的相邻选择器与CSS3的子元素过滤伪类能让我们用更精简的方式设置它们，而且是样式与结构分离那种，可惜IE家族总是拖后腿。我们再看一下它们的长度，由于最后一个表格有可能受滚动条挤压而缩短长度，我们保证前三列长度相等就行了，剩余的都分配给最后一个，换言之，最后一个不用设置。另，IE下可以设置滚动条的样式，我们也把玩一翻吧。

1. <table class="thead">
2. <col width="170px"></col> <col width="170px"></col> <col width="170px"></col><col></col>
3. <tbody>
4. //********************略*****************
5. </tbody>
6. </table>
7. <div>
8. <table class="tbody">
9. <col width="170px"></col> <col width="170px"></col> <col width="170px"></col><col></col>
10. <tbody>
11. //********************略*****************
12. </tbody>
13. </table>
14. </div>

表现层部分：

1. #scrollTable {
2. width:701px;
3. border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
4. background: #FF8C00;
5. }
6.  
7. #scrollTable table {
8. border-collapse:collapse; /*统一设置两个table为细线表格*/
9. }
10. /*表头 div的第一个子元素**/
11. #scrollTable table.thead{
12. width:100%;
13. }
14. /*表头*/
15. #scrollTable table.thead th{
16. border: 1px solid #EB8;
17. border-right:#C96;
18. color:#fff;
19. background: #FF8C00;/*亮桔黄色*/
20. }
21. /*能带滚动条的表身*/
22. /*div的第二个子元素*/
23. #scrollTable div{
24. width:100%;
25. height:200px;
26. overflow:auto;/*必需*/
27. scrollbar-face-color:#EB8;/*那三个小矩形的背景色*/
28. scrollbar-base-color:#ece9d8;/*那三个小矩形的前景色*/
29. scrollbar-arrow-color:#FF8C00;/*上下按钮里三角箭头的颜色*/
30. scrollbar-track-color:#ece9d8;/*滚动条的那个活动块所在的矩形的背景色*/
31. scrollbar-highlight-color:#800040;/*那三个小矩形左上padding的颜色*/
32. scrollbar-shadow-color:#800040;/*那三个小矩形右下padding的颜色*/
33. scrollbar-3dlight-color: #EB8;/*那三个小矩形左上border的颜色*/
34. scrollbar-darkshadow-Color:#EB8;/*那三个小矩形右下border的颜色*/
35. }
36. /*能带滚动条的表身的正体*/
37. #scrollTable table.tbody{
38. width:100%;
39. border: 1px solid #C96;
40. border-right:#B74;
41. color:#666666;
42. background: #ECE9D8;
43. }
44. /*能带滚动条的表身的格子*/
45. #scrollTable table.tbody td{
46. border:1px solid #C96;
47. }

运行代码：

1. <!doctype html>
2. <html dir="ltr" lang="zh-CN">
3. <head>
4. <meta charset="utf-8"/>
5. <title>纯CSS实现表头固定 </title>
6. <style type="text/css">
7.  
8. #scrollTable {
9. width:701px;
10. border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
11. background: #FF8C00;
12. }
13.  
14. #scrollTable table {
15. border-collapse:collapse; /*统一设置两个table为细线表格*/
16. }
17. /*表头 div的第一个子元素**/
18. #scrollTable table.thead{
19. width:100%;
20. }
21. /*表头*/
22. #scrollTable table.thead th{
23. border: 1px solid #EB8;
24. border-right:#C96;
25. color:#fff;
26. background: #FF8C00;/*亮桔黄色*/
27. }
28. /*能带滚动条的表身*/
29. /*div的第二个子元素*/
30. #scrollTable div{
31. width:100%;
32. height:200px;
33. overflow:auto;/*必需*/
34. scrollbar-face-color:#EB8;/*那三个小矩形的背景色*/
35. scrollbar-base-color:#ece9d8;/*那三个小矩形的前景色*/
36. scrollbar-arrow-color:#FF8C00;/*上下按钮里三角箭头的颜色*/
37. scrollbar-track-color:#ece9d8;/*滚动条的那个活动块所在的矩形的背景色*/
38. scrollbar-highlight-color:#800040;/*那三个小矩形左上padding的颜色*/
39. scrollbar-shadow-color:#800040;/*那三个小矩形右下padding的颜色*/
40. scrollbar-3dlight-color: #EB8;/*那三个小矩形左上border的颜色*/
41. scrollbar-darkshadow-Color:#EB8;/*那三个小矩形右下border的颜色*/
42. }
43. /*能带滚动条的表身的正体*/
44. #scrollTable table.tbody{
45. width:100%;
46. border: 1px solid #C96;
47. border-right:#B74;
48. color:#666666;
49. background: #ECE9D8;
50. }
51. /*能带滚动条的表身的格子*/
52. #scrollTable table.tbody td{
53. border:1px solid #C96;
54. }
55.  
56. </style>
57. </head>
58. <body>
59. <div id="scrollTable">
60. <table class="thead">
61. <col width="170px"></col> <col width="170px"></col> <col width="170px"></col><col></col>
62. <tbody>
63. <tr>
64. <th>名称</th>
65. <th>语法</th>
66. <th>说明</th>
67. <th>例子</th>
68. </tr>
69. </tbody>
70. </table>
71. <div>
72. <table class="tbody">
73. <col width="170px"></col> <col width="170px"></col> <col width="170px"></col><col></col>
74. <tbody>
75. <tr>
76. <td>Simple attribute Selector</td>
77. <td>[attr] </td>
78. <td>选择具有此属性的元素</td>
79. <td>blockquote[title] { <br/>color: red }</td>
80. </tr>
81. <tr>
82. <td>attribute Value Selector</td>
83. <td>[attr="value"] </td>
84. <td>选出属性值精确等于给出值的元素</td>
85. <td>h2[align="left"] { <br/>cursor: hand } </td>
86. </tr>
87. <tr>
88. <td>"Begins-with" attribute Value Selector</td>
89. <td>[attr^="value"] </td>
90. <td>选出属性值以给出值开头的元素</td>
91. <td>h2[align^="right"] { <br/>cursor: hand } </td>
92. </tr>
93. <tr>
94. <td>"Ends-with" attribute Value Selector</td>
95. <td>[attr$="value"] </td>
96. <td>选出属性值以给出值结尾的元素</td>
97. <td>div[class$="vml"]{<br/>cursor: hand} </td>
98. </tr>
99. <tr>
100. <td>Substring-match attribute Value Selector</td>
101. <td>[attr*="value"] </td>
102. <td>选出属性值包含给出值的元素</td>
103. <td>div[class*="grid"]{<br/> float:left} </td>
104. </tr>
105. <tr>
106. <td>One-Of-Many Attribute Value Selector</td>
107. <td>[attr~="value"] </td>
108. <td>原元素的属性值为多个单词，给出值为其中一个。</td>
109. <td>li[class~="last"]{<br/> padding-left:2em} </td>
110. </tr>
111. <tr>
112. <td>Hyphen Attribute Value Selector</td>
113. <td>[attr|="value"] </td>
114. <td>原元素的属性值等于给出值，或者以给出值加“-”开头</td>
115. <td>span[lang|="en"]{ <br/>color:green}</td>
116. </tr>
117. <tr>
118. <td>反选属性值选择器</td>
119. <td>[attr!="value"] </td>
120. <td>非标准，jQuery中出现的</td>
121. <td>span[class!="red"]{<br/>color:green}</td>
122. </tr>
123. </tbody>
124. </table>
125. </div>
126. </div>
127.  
128. </body>
129. </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。