bootstrap-table用法-头部不滚动的实现

先上html代码

<div id="test" class="table-responsive" style="padding: 0;overflow:auto;">
	<table id="resourceTable" style="min-width:1500px;" class="table table-nowrap"></table>
</div>

在上js代码

/**
 * table头部拒绝滚动操作
 * test为table父类divid
 * */
var $fixTable = $('#test .table-responsive');
$('#test').scroll(function() {
	var id = '#' + this.id;
	var scrollTop = $(id).scrollTop() || $(id).get(0).scrollTop,
		style = {
			'position': 'absolute',
			'left': '0',
			'right': '0',
			'top': scrollTop + 'px'
		};
	if ($fixTable.length) {
		(scrollTop === 0) ? $fixTable.addClass('hidden') : $fixTable.removeClass('hidden');
		$fixTable.css(style);
	} else {
		var html = $(id + ' .scrollTable thead').get(0).innerHTML;
		var table = $('<table class="table table-bordered fixTable"><thead>' + html + '</thead></table>');
		table.css(style);
		$(id).append(table);
		$fixTable = $(this).find('.table-responsive');
	}
});

上一张效果图：

表格不分页横向纵向出现滚动条

<div id="test" class="table-responsive" style="padding: 0;overflow:auto;">
	<table id="resourceTable" style="min-width:1500px;" class="table table-nowrap"></table>
</div>