CSS固定表頭的HTML表格
資料來源:CSDN技術中心、superhasty 的 Blog
經在項目中實現過一個固定表頭的HTML表格,但使用了非常臃腫的代碼,因為實際上是畫了三個一樣的表格。偶然的機會,發現了一個純粹用HTML和CSS實現的固定表頭的表格。現將其簡化代碼摘錄如下。
原地址見: http://www.imaputz.com/cssStuff/bulletVersion.html。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 | <style type=""text/css""> <!-- body { background: #FFF; color: #000; font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 10px; padding: 0 } table, td, a { color: #000; font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif } .td { nowrap:'true'; } div.tableContainer { clear: both; border: 1px solid #963; height: 285px; overflow: auto; width: 100%; } /* WinIE 6.x needs to re-account for it's scrollbar. Give it some padding */ html div.tableContainer/* */ { padding: 0 16px 0 0 } /* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */ html>body div.tableContainer { height: auto; padding: 0; width: 740px } /* Reset overflow value to hidden for all non-IE browsers. */ /* Filter out Opera 5.x/6.x and MacIE 5.x */ head:first-child+body div[class].tableContainer { height: 285px; overflow: hidden; width: 756px } /* define width of table. IE browsers only */ /* if width is set to 100%, you can remove the width */ /* property from div.tableContainer and have the div scale */ div.tableContainer table { float: left; width: 100% } /* WinIE 6.x needs to re-account for padding. Give it a negative margin */ html div.tableContainer table/* */ { margin: 0 -16px 0 0 } /* define width of table. Opera 5.x/6.x and MacIE 5.x */ html>body div.tableContainer table { float: none; margin: 0; width: 740px } /* define width of table. Add 16px to width for scrollbar. */ /* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */ head:first-child+body div[class].tableContainer table { width: 756px } /* set table header to a fixed position. WinIE 6.x only */ /* In WinIE 6.x, any element with a position property set to relative and is a child of */ /* an element that has an overflow property set, the relative value translates into fixed. */ /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */ thead.fixedHeader tr { position: relative; /* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */ top: expression(document.getElementById("tableContainer").scrollTop) } /* set THEAD element to have block level attributes. All other non-IE browsers */ /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */ /* Filter out Opera 5.x/6.x and MacIE 5.x */ head:first-child+body thead[class].fixedHeader tr { display: block } /* make the TH elements pretty */ thead.fixedHeader th { background: #C96; border-left: 1px solid #EB8; border-right: 1px solid #B74; border-top: 1px solid #EB8; font-weight: normal; padding: 4px 3px; text-align: center } /* make the A elements pretty. makes for nice clickable headers */ thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited { color: #FFF; display: block; text-decoration: none; width: 100% } /* make the A elements pretty. makes for nice clickable headers */ /* WARNING: swapping the background on hover may cause problems in WinIE 6.x */ thead.fixedHeader a:hover { color: #FFF; display: block; text-decoration: underline; width: 100% } /* define the table content to be scrollable */ /* set TBODY element to have block level attributes. All other non-IE browsers */ /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */ /* induced side effect is that child TDs no longer accept width: auto */ /* Filter out Opera 5.x/6.x and MacIE 5.x */ head:first-child+body tbody[class].scrollContent { display: block; height: 262px; overflow: auto; width: 100% } /* make TD elements pretty. Provide alternating classes for striping the table */ /* http://www.alistapart.com/articles/zebratables/ */ tbody.scrollContent td, tbody.scrollContent tr.normalRow td { background: #FFF; border-bottom: 1px solid #EEE; border-left: 1px solid #EEE; border-right: 1px solid #AAA; border-top: 1px solid #AAA; padding: 2px 3px } tbody.scrollContent tr.alternateRow td { background: #EEE; border-bottom: 1px solid #EEE; border-left: 1px solid #EEE; border-right: 1px solid #AAA; border-top: 1px solid #AAA; padding: 2px 3px } /* define width of TH elements: 1st, 2nd, and 3rd respectively. */ /* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */ /* Add 16px to last TH for scrollbar padding */ /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */ head:first-child+body thead[class].fixedHeader th { width: 200px } head:first-child+body thead[class].fixedHeader th + th { width: 250px } head:first-child+body thead[class].fixedHeader th + th + th { border-right: none; padding: 4px 4px 4px 3px; width: 316px } /* define width of TH elements: 1st, 2nd, and 3rd respectively. */ /* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */ /* Add 16px to last TH for scrollbar padding */ /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */ head:first-child+body tbody[class].scrollContent td { width: 200px } head:first-child+body tbody[class].scrollContent td + td { width: 250px } head:first-child+body tbody[class].scrollContent td + td + td { border-right: none; padding: 2px 4px 2px 3px; width: 300px /* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */ top: expression(document.getElementById("tableContainer").scrollTop) } --> </style> |
<div class=””tableContainer”” id=””tableContainer””>
<table class=””scrollTable”” cellspacing=””0″” cellpadding=””0″” width=””100%”” border=””0″”>
<thead class=””fixedHeader””>
<tr>
<th><a href=”http://say881.mtgbb.com/owner/entry/edit/”#””>Header 1</a></th>
<th><a href=”http://say881.mtgbb.com/owner/entry/edit/”#””>Header 2</a></th>
<th><a href=”http://say881.mtgbb.com/owner/entry/edit/”#””>Header 3</a></th>
<th><a href=”http://say881.mtgbb.com/owner/entry/edit/”#””>Header 4</a></th>
<th><a href=”http://say881.mtgbb.com/owner/entry/edit/”#””>Header 5</a></th>
<th><a href=”http://say881.mtgbb.com/owner/entry/edit/”#””>Header 6</a></th>
<th><a href=”http://say881.mtgbb.com/owner/entry/edit/”#””>Header 7</a></th>
</tr>
</thead>
<tbody class=””scrollContent””>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 4</td>
<td>Cell Content 5</td>
<td>Cell Content 6</td>
<td>Cell Content 7</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>More Cell Content 4</td>
<td>More Cell Content 5</td>
<td>More Cell Content 6</td>
<td>More Cell Content 7</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
<td>Even More Cell Content 4</td>
<td>Even More Cell Content 5</td>
<td>Even More Cell Content 6</td>
<td>Even More Cell Content 7</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 4</td>
<td>And Repeat 5</td>
<td>And Repeat 6</td>
<td>And Repeat 7</td>
</tr>
</tbody>
</table>
</div>