我有一个固定的表头文件脚本，完全按照我的需要工作，除非表格比窗口宽 AND twitter bootstrap 3 css正在页面上加载 AND 我正在使用IE或Firefox查看该页面。
有什么关于twitter bootstrap 3会改变这种行为？以下是我此时所拥有的内容jsfiddle
$( document ).ready(function() {
createFixedHeader("full-table")
});
//fixed header
function createFixedHeader(full_table_id){
var $full_table = $('#' + full_table_id);
var $fh_table = $("#fh-" + full_table_id);
var $header = $full_table.find("thead:first").clone();
/* Override bootstrap's box-sizing
$fh_table.css('width', $full_table.css('width'));
$header.css('box-sizing', 'content-box');
$fh_table.css('box-sizing', 'content-box');
$fh_table.find('tr').css('box-sizing', 'content-box');
*/
$fh_table.append($header);
// $fh_table.css('tableLayout', 'fixed');
//find each th of fixed header and set width equal to that of full table
$fh_table.find('th').each(function(index){
var index2 = index;
$(this).css('width', function(index){
return ($full_table.find("th:eq(" + index2 + ")").css('width'));
});
});
$fh_table.hide();
$(window).bind("scroll", function() {
var pageOffsetTop = $(this).scrollTop();
$('.tbl').each(function(){
if(!$('#fh-' + $(this).attr('id')).length){
return;
}
var tableOffsetTop = $(this).offset().top;
var tableOffsetBottom = tableOffsetTop + $(this).height();
$fixedHeader = $('#fh-' + $(this).attr('id'));
$fixedHeader.css('width', $full_table.css('width'));
//if the header is above the top of the window but the bottom is not
if (pageOffsetTop >= tableOffsetTop && pageOffsetTop <= (tableOffsetBottom - $fixedHeader.height())) {
if($fixedHeader.is(":hidden")){
$fixedHeader.show();
}
//set horizontal position if there is scrolling
$fixedHeader.offset({left: $(this).offset().left});
}
//if top of table is within window or the bottom of the table is above the top of the window
else if ((pageOffsetTop <= tableOffsetTop || pageOffsetTop => (tableOffsetBottom - $fixedHeader.height())) && !$fixedHeader.is(":hidden")) {
$fixedHeader.hide();
}
});
});
}table {border-collapse: collapse;}
td, th {border: solid 1px black;}
.fixed-header {
position: fixed;
display:none;
background: white;
top: 0px;
border-collapse: collapse;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="tbl" id="full-table">
<thead>
<tr><th rowspan="2">Error Code</th><th colspan="12">Cow Identification</th><th colspan="4">Sire Identification</th><th colspan="3">Dam Identification</th><th rowspan="2">Curr Status Text</th><th rowspan="2">Curr Status Date</th><th rowspan="2">List Num</th></tr>
<tr><th>Cntl#</th><th>Official ID</th><th>RFID</th><th>Reg</th><th>BRD</th><th>Col</th><th>Type</th><th>PStr</th><th>Birth Date</th><th>Lact Num</th><th>Barn Name</th><th>Visible Id</th><th>BRD</th><th>Sire Name</th><th>NAAB Code</th><th>Official Sire ID</th><th>BRD</th><th>Dam Name</th><th>Official Dam ID</th></tr>
</thead>
<tbody>
<tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>HO</td><td></td><td></td><td>1</td><td>02-24-2007</td><td>6</td><td>data</td><td>data</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>HO</td><td>longerdata</td><td></td><td>cow fresh</td><td>03-20-2014</td><td>5,863</td></tr>
<tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>HO</td><td></td><td></td><td>1</td><td>05-23-2007</td><td>5</td><td>data</td><td>5897</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>XX</td><td>longerdata</td><td></td><td>cow fresh</td><td>02-05-2014</td><td>5,897</td></tr>
<tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>HO</td><td></td><td></td><td>1</td><td>06-06-2007</td><td>5</td><td>data</td><td>5904</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>XX</td><td>longerdata</td><td></td><td>cow fresh</td><td>02-22-2014</td><td>5,904</td></tr>
<tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>XX</td><td></td><td></td><td>1</td><td>07-22-2007</td><td>6</td><td>data</td><td>5918</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>HO</td><td>longerdata</td><td></td><td>cow fresh</td><td>09-03-2014</td><td>5,918</td></tr>
<tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>XX</td><td></td><td></td><td>1</td><td>08-01-2007</td><td>5</td><td>data</td><td>5924</td><td>XX</td><td>data</td><td>longerdata</td><td>longerdata</td><td>HO</td><td>longerdata</td><td></td><td>cow fresh</td><td>04-24-2014</td><td>5,924</td></tr>
<tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>XX</td><td></td><td></td><td>1</td><td>08-17-2007</td><td>6</td><td>data</td><td>5934</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>HO</td><td>longerdata</td><td></td><td>cow fresh</td><td>08-08-2014</td><td>5,934</td></tr>
<tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>XX</td><td></td><td></td><td>1</td><td>10-29-2007</td><td>5</td><td>data</td><td>5971</td><td>XX</td><td></td><td>longerdata</td><td></td><td>HO</td><td>longerdata</td><td></td><td>cow fresh</td><td>10-28-2013</td><td>5,971</td></tr>
<tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>XX</td><td></td><td></td><td>1</td><td>04-04-2008</td><td>5</td><td>data</td><td>6071</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>HO</td><td>longerdata</td><td></td><td>cow fresh</td><td>09-24-2014</td><td>6,071</td></tr>
<tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>XX</td><td></td><td></td><td>1</td><td>07-02-2008</td><td>4</td><td>data</td><td>6123</td><td>XX</td><td></td><td>longerdata</td><td></td><td>HO</td><td>longerdata</td><td>longerdata</td><td>cow fresh</td><td>01-19-2014</td><td>6,123</td></tr>
<tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>HO</td><td></td><td></td><td>1</td><td>11-24-2011</td><td>1</td><td>data</td><td>7038</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>HO</td><td>longerdata</td><td></td><td>heifer fresh</td><td>12-09-2013</td><td>7,038</td></tr>
<tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>HO</td><td></td><td></td><td>1</td><td>02-16-2012</td><td>1</td><td>data</td><td>7123</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>HO</td><td>longerdata</td><td></td><td>heifer fresh</td><td>03-27-2014</td><td>7,123</td></tr>
</tbody>
</table>
<table id="fh-full-table" class="fixed-header">
</table>