当表格宽于窗口时，固定标题列未对齐（仅限Twitter引导程序）

时间：2014-11-17 20:11:00

标签： html css twitter-bootstrap fixed-header-tables

我有一个固定的表头文件脚本，完全按照我的需要工作，除非表格比窗口宽 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>

0 个答案:

没有答案
相关问题
最新问题