首页 > 代码库 > 多表头固定demo--html Table
多表头固定demo--html Table
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 6 <style type="text/css"> 7 table th 8 { 9 background-color: Gray; 10 } 11 table tbody td 12 { 13 word-break: break-all; 14 word-wrap: break-word; 15 } 16 </style> 17 <script type="text/javascript"> 18 /* 19 * Auther:Mike.Jiang 20 * Email: dataadapter@hotmail.com 21 * Date: 2012-09-05 22 */ 23 /* 24 主要思想： 25 1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中 26 2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置 27 */ 28 (function ($) { 29 $.fn.extend({ 30 FixedHead: function (options) { 31 var op = $.extend({ tableLayout: "auto" }, options); 32 return this.each(function () { 33 var $this = $(this); //指向当前的table 34 var $thisParentDiv = $(this).parent(); //指向当前table的父级DIV，这个DIV要自己手动加上去 35 $thisParentDiv.wrap("<div class=‘fixedtablewrap‘></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上，再加一个DIV 36 var x = $thisParentDiv.position(); 37 38 var fixedDiv = $("<div class=‘fixedheadwrap‘ style=‘clear:both;overflow:hidden;z-index:2;position:absolute;‘ ></div>") 39 .insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV，此DIV用来包装tabelr的表头 40 .css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top }); 41 42 var $thisClone = $this.clone(true); 43 $thisClone.find("tbody").remove(); //复制一份table，并将tbody中的内容删除，这样就仅余thead，所以要求表格的表头要放在thead中 44 $thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中 45 46 $this.css({ "marginTop": 0, "table-layout": op.tableLayout }); 47 //当前TABLE的父级DIV有水平滚动条，并水平滚动时，同时滚动包装thead的DIV 48 $thisParentDiv.scroll(function () { 49 fixedDiv[0].scrollLeft = $(this)[0].scrollLeft; 50 }); 51 52 //因为固定后的表头与原来的表格分离开了，难免会有一些宽度问题 53 //下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头 54 var $fixHeadTrs = $thisClone.find("thead tr"); 55 var $orginalHeadTrs = $this.find("thead"); 56 $fixHeadTrs.each(function (indexTr) { 57 var $curFixTds = $(this).find("td"); 58 var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")"); 59 $curFixTds.each(function (indexTd) { 60 $(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width()); 61 }); 62 }); 63 }); 64 } 65 }); 66 })(jQuery); 67 $(document).ready(function () { 68 $("#tbTest").FixedHead({ tableLayout: "fixed" }); 69 }); 70 </script> 71 </head> 72 <body> 73 <div style="height: 200px; width: 400px; overflow: auto;"> 74 <table id="tbTest" border="1" cellspacing="1" cellpadding="1" style="width: 500px;"> 75 <thead> 76 <tr> 77 <th rowspan="2" style="width: 30%"> 78 项目 79 </th> 80 <th colspan="2"> 81 常规性税金 82 </th> 83 <th colspan="2"> 84 非常规性税金 85 </th> 86 <th rowspan="2" style="width: 10%"> 87 工程税 88 </th> 89 </tr> 90 <tr> 91 <th style="width: 15%"> 92 城建税 93 </th> 94 <th style="width: 15%"> 95 教育费附加% 96 </th> 97 <th style="width: 15%"> 98 堤围防护费% 99 </th>100 <th style="width: 15%">101 个人所得税%102 </th>103 </tr>104 </thead>105 <tbody>106 <tr>107 <td>108 0.2109 </td>110 <td>111 11111111111111111.2112 </td>113 <td>114 0.2115 </td>116 <td>117 0.2118 </td>119 <td>120 0.2121 </td>122 <td>123 0.2124 </td>125 </tr>126 <tr>127 <td>128 0.2129 </td>130 <td>131 0.2132 </td>133 <td>134 0.2135 </td>136 <td>137 0.2138 </td>139 <td>140 0.2141 </td>142 <td>143 0.2144 </td>145 </tr>146 <tr>147 <td>148 0.2149 </td>150 <td>151 0.2152 </td>153 <td>154 0.2155 </td>156 <td>157 0.2158 </td>159 <td>160 0.2161 </td>162 <td>163 0.2164 </td>165 </tr>166 <tr>167 <td>168 0.2169 </td>170 <td>171 0.2172 </td>173 <td>174 0.2175 </td>176 <td>177 0.2178 </td>179 <td>180 0.2181 </td>182 <td>183 0.2184 </td>185 </tr>186 <tr>187 <td>188 0.2189 </td>190 <td>191 0.2192 </td>193 <td>194 0.2195 </td>196 <td>197 0.2198 </td>199 <td>200 0.2201 </td>202 <td>203 0.2204 </td>205 </tr>206 <tr>207 <td>208 0.2209 </td>210 <td>211 0.2212 </td>213 <td>214 0.2215 </td>216 <td>217 0.2218 </td>219 <td>220 0.2221 </td>222 <td>223 0.2224 </td>225 </tr>226 <tr>227 <td>228 0.2229 </td>230 <td>231 0.2232 </td>233 <td>234 0.2235 </td>236 <td>237 0.2238 </td>239 <td>240 0.2241 </td>242 <td>243 0.2244 </td>245 </tr>246 <tr>247 <td>248 0.2249 </td>250 <td>251 0.2252 </td>253 <td>254 0.2255 </td>256 <td>257 0.2258 </td>259 <td>260 0.2261 </td>262 <td>263 0.2264 </td>265 </tr>266 <tr>267 <td>268 0.2269 </td>270 <td>271 0.2272 </td>273 <td>274 0.2275 </td>276 <td>277 0.2278 </td>279 <td>280 0.2281 </td>282 <td>283 0.2284 </td>285 </tr>286 <tr>287 <td>288 0.2289 </td>290 <td>291 0.2292 </td>293 <td>294 0.2295 </td>296 <td>297 0.2298 </td>299 <td>300 0.2301 </td>302 <td>303 0.2304 </td>305 </tr>306 <tr>307 <td>308 0.2309 </td>310 <td>311 0.2312 </td>313 <td>314 0.2315 </td>316 <td>317 0.2318 </td>319 <td>320 0.2321 </td>322 <td>323 0.2324 </td>325 </tr>326 <tr>327 <td>328 0.2329 </td>330 <td>331 0.2332 </td>333 <td>334 0.2335 </td>336 <td>337 0.2338 </td>339 <td>340 0.2341 </td>342 <td>343 0.2344 </td>345 </tr>346 <tr>347 <td>348 0.2349 </td>350 <td>351 0.2352 </td>353 <td>354 0.2355 </td>356 <td>357 0.2358 </td>359 <td>360 0.2361 </td>362 <td>363 0.2364 </td>365 </tr>366 <tr>367 <td>368 0.2369 </td>370 <td>371 0.2372 </td>373 <td>374 0.2375 </td>376 <td>377 0.2378 </td>379 <td>380 0.2381 </td>382 <td>383 0.2384 </td>385 </tr>386 <tr>387 <td>388 0.2389 </td>390 <td>391 0.2392 </td>393 <td>394 0.2395 </td>396 <td>397 0.2398 </td>399 <td>400 0.2401 </td>402 <td>403 0.2404 </td>405 </tr>406 </tbody>407 </table>408 </div>409 </body>410 </html>
摘自：http://www.cnblogs.com/dataadapter/archive/2012/09/06/2672190.html
多表头固定demo--html Table
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。