先上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>