(java)请问Bootstrap的table如何设置横向滚动条??

各位大侠好!最近遇到一个问题,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>

我也有同样的问题,使用了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;
}
}

暂时没这样的需求,没试过,不过你可以给每个td设置一个min-width试下

两个小表格有table-reaponsive类名,然后外面有一个大的div,大盒子display:flex,也加上table-responsive这个类名,不应该显示三个滚动条吗,一直不出现,感觉是互斥的,如何解决。