《table固定前两列和最后一列,其他滑动显示》由会员分享，可在线阅读，更多相关《table固定前两列和最后一列,其他滑动显示（8页珍藏版）》请在金锄头文库上搜索。
1、table 固定前两列和最后一列，其他滑动显示<!DOCTYPE html><html><head><meta http-equiv=Content-Type content=text/html;charset=utf-8 /><title></title><metacharset=utf-8 /><style type=text/css>margin: 0;padding: 0;#table position: relative;#table th:first-child, #table th:n
2、th-child(2), #table th:last-child,#table tr > td:first-child, #table tr > td:nth-child(2), #tabletr > td:last-child background-color:#ff0000;position: fixed;z-index: 2; </style><script长的那个 td 的长度var tdWith = 0;src=./Scripts/jq/jquery-2.1.4/jquery-2.1.4.js></script>$(functi
3、on ()<script type=text/javascript>if ($(#table>thead>tr>th).length >5) / 设置固定列的 th 和 td 的 with 都为最$(#table tr>td:first-child).each(function (index, item)if ($(item).width() > tdWith)tdWith =$(#table th:first-child,#table tr>td:first-child).width(tdWith);tdWith =0;$(#table
4、th:nth-child(2),#tabletr>td:nth-child(2).each(function (index, item)if ($(item).width() > tdWith)tdWith =$(item).width(););$(#table th:nth-child(2),#tabletr>td:nth-child(2).width(tdWith);tdWith = 0;$(#table th:last-child,#tabletr>td:last-child).each(function (index, item)if ($(item).widt
5、h() > tdWith)tdWith =$(item).width(););$(#table th:last-child,#table tr>td:last-child).width(tdWith);/设置外面 div 的 withvar div_abroadWith =0;$(#table>tbody>tr:first-child>td).each(function(index, item) if (index < 5)div_abroadWith += else$(item).width();false; ); /设置 table 的 withvar
6、tableWith = 0;$(#table>tbody>tr:first-child>td).each(function (index, item) tableWith += $(item).width(); );$(#table).width(tableWith); div_abroadWith += $(#table th:last-child).width(); $(#div_abroad).width(div_abroadWith); / 设置固定列的偏移量 $(#table th:first-child,tr>td:first-child).css(left
7、, $(#div_abroad).offset().left); $(#table th:nth-child(2),tr>td:nth-child(2).css(left, $(#div_abroad).offset().left + $(#table td:first-child).width(); $(#table th:last-child,tr>td:last-child).css(left, $(#div_abroad).offset().left + $(#div_abroad).width() - $(#table td:last-child).width();/ 因
8、为第一，二和最后一个设置定位了， 所以 table 里缺少了 3 列造成 滚动条不足， 所以要为 table 补充 3 列，补充位置有要求， 必 须在第二列的后面补上第一，第二列。这两列的宽度和原先 的保持一致 / 最后一列的上面要补充一 列，宽度和最后一列保持一致。 var $td =$(<th style=width: + $(#table th:first-child).width().toString() + px></th><th style=width: + $(#table th:nth-child(2).width().toString() + p
9、x></th>);$(#tableth).eq(2).before($td);$td = <tdstyle=width: + $(#table th:first-child).width().toString() + px></td><td style=width: + $(#table th:nth-child(2).width().toString() + px></td> $(#table tbody>tr).each(function (index, item) $(item).find(td).eq(2).bef
10、ore($($td) ; );$td = $(<tdstyle=width: + $(#table th:last-child).width().toString() + px></td>); $(#table tbody>tr>td:last-child).before($td); ); </script></head><body><div id=div_abroad style=overflow-x: auto;width:300px;margin:50px auto;background:#4cff00>
11、 <table id=table style=border-collapse: collapse borderColor=#000000 height=40 cellPadding=1 border=1> <thead> <tr><th> 列 1</th> <th> 列 2</th> <th> 列 3</th><th> 列<th> 列 4</th>5</th><th> 列 6</th><th> 列 7&l
12、t;/th><th> 列8</th><th> 列 9</th><th> 列 10</th></tr></thead><tbody><tr><td>111111111111111111111111</td><td>222222222</td><td>33333333</td><td>44444</td><td>555555555555555555555</td
13、><td>66666666</td><td>777777</td><td>88888888</td><td>9999999</td><td>10959</td> </tr><tr><td>111111111111111</td><td>22222222222</td><td>333333</td><td>444444444444</td><td&
14、gt;5555555555555555</td><td>666666666666</td><td>777777</td><td>88888888888888888</td><td>999999999999</td></tr><td>109555559</td><tr><td>111111111111111</td><td>222222222222222222222</td><td>
15、333333333333</td><td>4444444</td><td>555555555555555555555</td><td>66666666</td><td>777777</td><td>88888888</td><td>9999999</td><td>109555999995559</td></tr> <tr><td>111111111111111</td><td>22222222222</td><td>333333eeee33</td&
