2 kobe521000 kobe521000 于 2016.05.03 17:31 提问

(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>

3个回答

CSDNXIAON
CSDNXIAON   2016.05.03 17:42

横向滚动条的设置
----------------------同志你好,我是CSDN问答机器人小N,奉组织之命为你提供参考答案,编程尚未成功,同志仍需努力!

qq_37793251
qq_37793251   2017.03.07 10:33

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

qq_32285999
qq_32285999   2017.03.13 14:07

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!