（java）请问Bootstrap的table如何设置横向滚动条？？

Question

各位大侠好！最近遇到一个问题，Bootstrap的table列表表头过多时，都挤成了一堆，
无法设置横向滚动条，麻烦有懂的指点一下怎么添加横向滚动条，谢谢！

这是相关代码：

div class=" bootstrap-admin-panel-content">
table class="table table-striped table-bordered" id="list-video">
thead>
tr>
th data-column-id="userId">用户ID
th data-column-id="userName">用户名称
th data-column-id="Type">用户类型
th data-column-id="Sex">性别
th data-column-id="IDCardNo">身份证
th data-column-id="loginName">登陆名称
th data-column-id="password">密码
th data-column-id="operation" data-formatter="operation" data-sortable="false">操作
/tr>
/thead>
/table>
/div>

Answer 1

我也有同样的问题，使用了table-responsive之后，屏幕缩小至768px后 可以横向显示，但是大屏依旧很挤，就复写了这个css样式，也可以使用
html:

....

css:(这个max-width根据自己表格长短的需求自己调就可以)
@media screen and (max-width: 2000px) {
.order-table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.order-table-responsive > .table {
margin-bottom: 0;
}
.order-table-responsive > .table > thead > tr > th,
.order-table-responsive > .table > tbody > tr > th,
.order-table-responsive > .table > tfoot > tr > th,
.order-table-responsive > .table > thead > tr > td,
.order-table-responsive > .table > tbody > tr > td,
.order-table-responsive > .table > tfoot > tr > td {
white-space: nowrap;
}
.order-table-responsive > .table-bordered {
border: 0;
}
.order-table-responsive > .table-bordered > thead > tr > th:first-child,
.order-table-responsive > .table-bordered > tbody > tr > th:first-child,
.order-table-responsive > .table-bordered > tfoot > tr > th:first-child,
.order-table-responsive > .table-bordered > thead > tr > td:first-child,
.order-table-responsive > .table-bordered > tbody > tr > td:first-child,
.order-table-responsive > .table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.order-table-responsive > .table-bordered > thead > tr > th:last-child,
.order-table-responsive > .table-bordered > tbody > tr > th:last-child,
.order-table-responsive > .table-bordered > tfoot > tr > th:last-child,
.order-table-responsive > .table-bordered > thead > tr > td:last-child,
.order-table-responsive > .table-bordered > tbody > tr > td:last-child,
.order-table-responsive > .table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.order-table-responsive > .table-bordered > tbody > tr:last-child > th,
.order-table-responsive > .table-bordered > tfoot > tr:last-child > th,
.order-table-responsive > .table-bordered > tbody > tr:last-child > td,
.order-table-responsive > .table-bordered > tfoot > tr:last-child > td {
border-bottom: 0;
}
}