如何将dataTables的水平滚动条放在表格的顶部？
我有一个非常大的数据表，我想把水平滚动条放在桌面的顶部和底部，这样用户就可以更容易地滚动（数据表有很多列）。 有没有一种简单而恰当的方法来实现这一目标？
您可以使用具有最大宽度的容器并将表放入其中。
...
根据您想要的可靠性，您可以：
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; }
Bottom scrollbar: 00 01 02 03 04 05 06 07 08 09 00 01 02 03 04 05 06 07 08 09
我找到了将滚动放在桌面上的解决方案。 请看一下： 在Fiddle Hope 演示它会有所帮助。
`.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 = $('') .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( '' ) } ); } ); } } ); $('#example tfoot tr').insertAfter($('#example thead tr')); } );
请看这里类似的查询：
表格顶部和底部的水平滚动条
这个解决方案适用于我的数据表。
您可以在css中使用overflow属性。
您应该在两个不同的表中分隔表的主体和标题。 然后将第二个表（原始表的主体）放在div中并在此div上使用溢出。
在jsfiddle的演示
Column1 Column2
a b c d e f