在jQuery中冻结表头

我有以下脚本来冻结我的表。 这在屏幕的横向/纵向模式下工作正常，但是当以横向模式加载表并旋转到纵向时，旧clone(fixed header {fix_thead})以相同的宽度驻留。 关于方向改变

 jQuery(window).bind('orientationchange', function (e) {CheckInvTableFreeze ();} 

我再次调用冻结标头函数来调整冻结标头宽度与新表头。 在再次改变方向时，出现多个冻结标题。 如何根据我的原始表只有一个固定的表头。

 var CheckInvTableFreeze = function myfunction() { var CiTable = $('#myTable'), CiThead = CiTable.find('thead'), fix_thead; CiThead.find('th').each(function () { var el = $(this); el.css('width', el.width()); }); fix_thead = CiThead.clone().hide(); CiThead.after(fix_thead); fix_thead.css( { 'position': 'fixed', 'top': 0, 'width': CiThead.width() }); $(document).on('scrollstart', function (e) { if ($(this).scrollTop() > $('#myTable').offset().top) { fix_thead.show(); } else { fix_thead.hide(); } }); 

Answer 1

你可以试试这个

HTML

 
 
 
 
 
 
Aapple
 
Bboy
 
Ccat
 
Ddog
 
Eeagle
 
Ffoxrot
 
Ggoat
 
 
 
 
 
 
 
 
 
aaaaaaaaaaaaaaaaaaaaaaa
 
b
 
c
 
d
 
e
 
f
 
g
 
 
 
a
 
bbbbbbbbbbbbbbbbbbbbbbbbbbbb
 
c
 
d
 
e
 
f
 
g
 
 
 
a
 
b
 
cccccccccccc
 
d
 
e
 
f
 
g
 
 
 
a
 
b
 
c
 
dddddddddddddddddddddd
 
e
 
f
 
g
 
 
 
a
 
b
 
c
 
d
 
eeeeeeeee
 
f
 
g
 
 
 
a
 
b
 
c
 
d
 
e
 
ffffffffffffffffffffffffffffffffffffffffff
 
g
 
 
 
a
 
b
 
c
 
d
 
e
 
f
 
ggggggggggggggggggg
 
 
 
 
  

CSS

 .tableContainer table { width: 100%; border-collapse: collapse; font-size:16px; font-family: verdana,arial,sans-serif; } .tableContainer table tr td{border-top-color:transparent!important;} .tableContainer table tr th, .tableContainer table tr td{ min-width: 150px; min-height: 20px; height: 20px; padding: 10px; border: 1px solid #464e54; word-break: break-all; } .tableHeader { width: 50%; overflow: hidden; } .tableBody { width: 50%; height: 200px; overflow: auto; } 

JQUERY

 $(function(){ $(document).ready(function(){ $('.tableBody').scroll(function(){ $('.tableHeader table').css('margin-left', - $('.tableBody').scrollLeft()); }); }); });