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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
bootstrap在IE下table丢失横向滚动条的问题
首先,要把table嵌套在.table-responsive节点下,常见就是class为table-responsive的div中套着一个table 然后,table自身要有.table-fix。如果没有的话,在Chrome浏览器中仍然可以显示横向滚动条,但是在IE9中,是无法显示横向滚动条的。
让bootstrap表格自动出现水平滚动条
在table外加一个,如图:
bootstrap table 表头固定 、冻结列、横向纵向滚动条
前提:引入对应的js,css<link rel="stylesheet" type="text/css" href="/kaoqin/js/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/kaoqin/js/bootstrap-table/boot
bootstrap横向滚动条
在使用bootstrap的时候,手机端的页面出现横向滚动条, 查看row类的css样式内容为: .row{ margin-left:15px; margin-right:15px; } 因此确定就是由于这两个样式引起的。 故重写row类的css样式,即 .row{ margin-left:0px; margin-right:0px;
bootstrap栅栏布局下水平滚动条的处理
Bootstrap的栅栏布局,本意是将当前浏览器窗口,划分为12列,来进行自适应,以求达到可以兼容各个大小的浏览器窗口 然而我遇到了,有表格(而且表格特别多列)   需求:需要水平滚动条的 解决办法:只在table上加了滚动条
解决Bootstrap的row类,引起网页横向滚动条的问题。
在写网页的时候,采用了Bootstrap框架,在使用栅格布局的时候,在父标签中添加row类,发现引起网页出现横向滚动条的问题。 查看row类的css样式内容为: .row{ margin-left:15px; margin-right:15px; } 因此确定就是由于这两个样式因此的。 故重写row类的css样式,即 .row{ margin-left:0px; margin-
table 超多列 滚动条 自适应 bootstrap
Table显示滚动条,要先把table放到一个div中,控制overflow属性为scroll ... table设置最小长度 ... 现在只要div的长度小于table的长度,滚动条就显示出来了。
bootstrap 增加滚动条
其实只要在 相关模块的  class属性中,再加上  pre-scrollable 即可。 比如我的例子是在中添加pre-scrollable:
bootstrap table使用小记
bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等。 最近基于bootstrap开发一个开台发布系统,就开发过程中,使用bootstap table遇到的一些问题及收获记录如下: 开始使用: 需要在你自己的页面中引入以下样式及脚本: sr
jsp中为表格添加水平滚动条
首先,本项目中使用的是bootstrap框架,因此有些人会说,给表格设置自适应属性就可以了 这里要申明的是 bootsrtap自适应是针对当浏览器不占满整个屏幕,而是一半的时候才会出现横向的滚动条 而当我们将浏览器最大化的时候,如果列数增多了呢?会出现什么效果 答案就是会出现挤压的效果,横向并不会出现滚动条 查看网上的教程,很多人都说将什么父div设置100%,table添加sc