我正在使用DataTables和Bootstrap,但是无论我有多少列,我的表上总是会看到一点点x溢出。截屏:
我的标记:
<div class="table-responsive">
<table class="table data-table">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
</div>
我没有对
data-table
类应用任何样式,并且table
和table-responsive
类都是Bootstrap的。我的初始化代码:
$('.data-table').DataTable();
如何消除这种不必要的X滚动?我只希望在屏幕小得多且列显然不合适的情况下使用它。
最佳答案
解决方案
您需要使用container。将标记标记为div
或container
类的container-fluid
。
<div class="container-fluid">
<div class="table-responsive">
<table class="table data-table">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
</div>
</div>
还要添加以下CSS规则:
.table-responsive {
overflow-x: inherit;
}
演示
有关代码和演示,请参见this jsFiddle。
关于css - 具有Bootstrap表响应功能的DataTable始终具有较小的x溢出,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33808714/