多表头固定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.2 109 </td> 110 <td> 111 11111111111111111.2 112 </td> 113 <td> 114 0.2 115 </td> 116 <td> 117 0.2 118 </td> 119 <td> 120 0.2 121 </td> 122 <td> 123 0.2 124 </td> 125 </tr> 126 <tr> 127 <td> 128 0.2 129 </td> 130 <td> 131 0.2 132 </td> 133 <td> 134 0.2 135 </td> 136 <td> 137 0.2 138 </td> 139 <td> 140 0.2 141 </td> 142 <td> 143 0.2 144 </td> 145 </tr> 146 <tr> 147 <td> 148 0.2 149 </td> 150 <td> 151 0.2 152 </td> 153 <td> 154 0.2 155 </td> 156 <td> 157 0.2 158 </td> 159 <td> 160 0.2 161 </td> 162 <td> 163 0.2 164 </td> 165 </tr> 166 <tr> 167 <td> 168 0.2 169 </td> 170 <td> 171 0.2 172 </td> 173 <td> 174 0.2 175 </td> 176 <td> 177 0.2 178 </td> 179 <td> 180 0.2 181 </td> 182 <td> 183 0.2 184 </td> 185 </tr> 186 <tr> 187 <td> 188 0.2 189 </td> 190 <td> 191 0.2 192 </td> 193 <td> 194 0.2 195 </td> 196 <td> 197 0.2 198 </td> 199 <td> 200 0.2 201 </td> 202 <td> 203 0.2 204 </td> 205 </tr> 206 <tr> 207 <td> 208 0.2 209 </td> 210 <td> 211 0.2 212 </td> 213 <td> 214 0.2 215 </td> 216 <td> 217 0.2 218 </td> 219 <td> 220 0.2 221 </td> 222 <td> 223 0.2 224 </td> 225 </tr> 226 <tr> 227 <td> 228 0.2 229 </td> 230 <td> 231 0.2 232 </td> 233 <td> 234 0.2 235 </td> 236 <td> 237 0.2 238 </td> 239 <td> 240 0.2 241 </td> 242 <td> 243 0.2 244 </td> 245 </tr> 246 <tr> 247 <td> 248 0.2 249 </td> 250 <td> 251 0.2 252 </td> 253 <td> 254 0.2 255 </td> 256 <td> 257 0.2 258 </td> 259 <td> 260 0.2 261 </td> 262 <td> 263 0.2 264 </td> 265 </tr> 266 <tr> 267 <td> 268 0.2 269 </td> 270 <td> 271 0.2 272 </td> 273 <td> 274 0.2 275 </td> 276 <td> 277 0.2 278 </td> 279 <td> 280 0.2 281 </td> 282 <td> 283 0.2 284 </td> 285 </tr> 286 <tr> 287 <td> 288 0.2 289 </td> 290 <td> 291 0.2 292 </td> 293 <td> 294 0.2 295 </td> 296 <td> 297 0.2 298 </td> 299 <td> 300 0.2 301 </td> 302 <td> 303 0.2 304 </td> 305 </tr> 306 <tr> 307 <td> 308 0.2 309 </td> 310 <td> 311 0.2 312 </td> 313 <td> 314 0.2 315 </td> 316 <td> 317 0.2 318 </td> 319 <td> 320 0.2 321 </td> 322 <td> 323 0.2 324 </td> 325 </tr> 326 <tr> 327 <td> 328 0.2 329 </td> 330 <td> 331 0.2 332 </td> 333 <td> 334 0.2 335 </td> 336 <td> 337 0.2 338 </td> 339 <td> 340 0.2 341 </td> 342 <td> 343 0.2 344 </td> 345 </tr> 346 <tr> 347 <td> 348 0.2 349 </td> 350 <td> 351 0.2 352 </td> 353 <td> 354 0.2 355 </td> 356 <td> 357 0.2 358 </td> 359 <td> 360 0.2 361 </td> 362 <td> 363 0.2 364 </td> 365 </tr> 366 <tr> 367 <td> 368 0.2 369 </td> 370 <td> 371 0.2 372 </td> 373 <td> 374 0.2 375 </td> 376 <td> 377 0.2 378 </td> 379 <td> 380 0.2 381 </td> 382 <td> 383 0.2 384 </td> 385 </tr> 386 <tr> 387 <td> 388 0.2 389 </td> 390 <td> 391 0.2 392 </td> 393 <td> 394 0.2 395 </td> 396 <td> 397 0.2 398 </td> 399 <td> 400 0.2 401 </td> 402 <td> 403 0.2 404 </td> 405 </tr> 406 </tbody> 407 </table> 408 </div> 409 </body> 410 </html>
摘自：http://www.cnblogs.com/dataadapter/archive/2012/09/06/2672190.html
