我有一个非常大的数据表格,我想把水平滚动条放在表格的顶部和底部,这样用户就可以更容易地滚动(数据表格有很多列)。 有没有一种简单而正确的方法来实现这个目标?
我有一个非常大的数据表格,我想把水平滚动条放在表格的顶部和底部,这样用户就可以更容易地滚动(数据表格有很多列)。 有没有一种简单而正确的方法来实现这个目标?
您可以使用一个最大宽度的容器,并将表格放在其中。
<div class="large-table-container-1">
<table>...</table>
</div>
根据您需要的可靠性水平,您可以选择以下方式:
A. 底部滚动条,只需设置最大宽度并溢出x以进行滚动:
.large-table-container-1 {
max-width: 200px;
overflow-x: scroll;
overflow-y: auto;
}
演示:
.large-table-container-1 {
max-width: 200px;
overflow-x: scroll;
overflow-y: auto;
}
.large-table-container-1 table {
}
/*misc*/
td {
border: 1px solid gray;
}
th {
text-align: left;
}
<div class="large-table-container-1">
<table>
<thead>
<tr>
<th colspan="20">
Bottom scrollbar:
</th>
</tr>
</thead>
<tbody>
<tr>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
</tr>
</tbody>
</table>
</div>
B. 顶部滚动条,这个方法有点hacky,使用180度的转换将滚动条旋转到顶部,然后再旋转另外180度来放回内容。
.large-table-container-2 {
max-width: 200px;
overflow-x: scroll;
overflow-y: auto;
transform:rotateX(180deg);
}
.large-table-container-2 table {
transform:rotateX(180deg);
}
在使用transform时,您可能需要使用浏览器特定的前缀,如-webkit-transform:rotateX(180度);
。
演示:
.large-table-container-2 {
max-width: 200px;
overflow-x: scroll;
overflow-y: auto;
transform:rotateX(180deg);
}
.large-table-container-2 table {
transform:rotateX(180deg);
}
/*misc*/
td {
border: 1px solid gray;
}
th {
text-align: left;
}
<div class="large-table-container-2">
<table>
<thead>
<tr>
<th colspan="20">
Top scrollbar:
</th>
</tr>
</thead>
<tbody>
<tr>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
</tr>
</tbody>
</table>
</div>
C. 顶部和底部滚动条,需要一些 JavaScript 的技巧。使用上面解决方案 A 中的方法,添加一个“假”的 div 元素来实现顶部滚动条:
<div class="large-table-fake-top-scroll-container-3">
<div> </div>
</div>
<div class="large-table-container-3">
<table>...</table>
</div>
.large-table-container-3 {
max-width: 200px;
overflow-x: scroll;
overflow-y: auto;
}
.large-table-container-3 table {
}
.large-table-fake-top-scroll-container-3 {
max-width: 200px;
overflow-x: scroll;
overflow-y: auto;
}
.large-table-fake-top-scroll-container-3 div {
background-color: red;/*Just for test, to see the 'fake' div*/
font-size:1px;
line-height:1px;
}
并使用一点 JavaScript 来捕获顶部虚拟 div 上的滚动事件,然后滚动表格容器(反之亦然),使用 jQuery 实现:
```javascript // 代码示例 ```$(function() {
var tableContainer = $(".large-table-container-3");
var table = $(".large-table-container-3 table");
var fakeContainer = $(".large-table-fake-top-scroll-container-3");
var fakeDiv = $(".large-table-fake-top-scroll-container-3 div");
var tableWidth = table.width();
fakeDiv.width(tableWidth);
fakeContainer.scroll(function() {
tableContainer.scrollLeft(fakeContainer.scrollLeft());
});
})
演示:
$(function() {
var tableContainer = $(".large-table-container-3");
var table = $(".large-table-container-3 table");
var fakeContainer = $(".large-table-fake-top-scroll-container-3");
var fakeDiv = $(".large-table-fake-top-scroll-container-3 div");
var tableWidth = table.width();
fakeDiv.width(tableWidth);
fakeContainer.scroll(function() {
tableContainer.scrollLeft(fakeContainer.scrollLeft());
});
tableContainer.scroll(function() {
fakeContainer.scrollLeft(tableContainer.scrollLeft());
});
})
.large-table-container-3 {
max-width: 200px;
overflow-x: scroll;
overflow-y: auto;
}
.large-table-container-3 table {
}
.large-table-fake-top-scroll-container-3 {
max-width: 200px;
overflow-x: scroll;
overflow-y: auto;
}
.large-table-fake-top-scroll-container-3 div {
background-color: red;
font-size:1px;
line-height:1px;
}
/*misc*/
td {
border: 1px solid gray;
}
th {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-table-fake-top-scroll-container-3">
<div> </div>
</div>
<div class="large-table-container-3">
<table>
<thead>
<tr>
<th colspan="20">
Top and bottom scrollbar:
</th>
</tr>
</thead>
<tbody>
<tr>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
</tr>
</tbody>
</table>
</div>
所有三种解决方案的完整工作代码:
$(function() {
var tableContainer = $(".large-table-container-3");
var table = $(".large-table-container-3 table");
var fakeContainer = $(".large-table-fake-top-scroll-container-3");
var fakeDiv = $(".large-table-fake-top-scroll-container-3 div");
var tableWidth = table.width();
fakeDiv.width(tableWidth);
fakeContainer.scroll(function() {
tableContainer.scrollLeft(fakeContainer.scrollLeft());
});
tableContainer.scroll(function() {
fakeContainer.scrollLeft(tableContainer.scrollLeft());
});
})
/*Bottom scrollbar*/
.large-table-container-1 {
max-width: 200px;
overflow-x: scroll;
overflow-y: auto;
}
.large-table-container-1 table {
}
/*Top scrollbar*/
.large-table-container-2 {
max-width: 200px;
overflow-x: scroll;
overflow-y: auto;
transform:rotateX(180deg);
}
.large-table-container-2 table {
transform:rotateX(180deg);
}
/*Top and bottom scrollbar*/
.large-table-container-3 {
max-width: 200px;
overflow-x: scroll;
overflow-y: auto;
}
.large-table-container-3 table {
}
.large-table-fake-top-scroll-container-3 {
max-width: 200px;
overflow-x: scroll;
overflow-y: auto;
}
.large-table-fake-top-scroll-container-3 div {
background-color: red;
font-size:1px;
line-height:1px;
}
/*misc*/
td {
border: 1px solid gray;
}
th {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-table-container-1">
<table>
<thead>
<tr>
<th colspan="20">
Bottom scrollbar:
</th>
</tr>
</thead>
<tbody>
<tr>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
</tr>
</tbody>
</table>
</div>
<div class="large-table-container-2">
<table>
<thead>
<tr>
<th colspan="20">
Top scrollbar:
</th>
</tr>
</thead>
<tbody>
<tr>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
</tr>
</tbody>
</table>
</div>
<div class="large-table-fake-top-scroll-container-3">
<div> </div>
</div>
<div class="large-table-container-3">
<table>
<thead>
<tr>
<th colspan="20">
Top and bottom scrollbar:
</th>
</tr>
</thead>
<tbody>
<tr>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
</tr>
</tbody>
</table>
</div>
`.dataTables_scrollBody {
transform:rotateX(180deg);
}
.dataTables_scrollBody table {
transform:rotateX(180deg);
}`
$(document).ready(function() {
$('#example').DataTable( {
scrollX : 'TRUE',
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
$('#example tfoot tr').insertAfter($('#example thead tr'));
} );
我使用css/jQuery显示标题的滚动条,并将页面主体的scrollLeft设置为标题的scroll left。
例如:
// Put top scroller
$('.dataTables_scrollHead').css({
'overflow-x':'scroll'
}).on('scroll', function(e){
var scrollBody = $(this).parent().find('.dataTables_scrollBody').get(0);
scrollBody.scrollLeft = this.scrollLeft;
$(scrollBody).trigger('scroll');
});
你可以在 CSS 中使用 overflow 属性。
你应该将表格的主体和头部分开成两个不同的表格,然后将原始表格的第二个表格(即主体)放入一个 div 中,并在此 div 上使用 overflow。
<html>
<head>
<style>
.myOverflow {
height: 100px;
overflow-y: scroll;
display: inline-block;
}
</style>
</head>
<body>
<table id="HeaderTable">
<tr>
<td class="col1">Column1</td>
<td class="col2">Column2</td>
</tr>
</table>
<div class="myOverflow">
<table id="BodyTable">
<tr>
<td class="col1">a</td>
<td class="col2">b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
</tr>
</table>
</div>
</body>
</html>
<script>
</script>