kobe521000
2016-05-03 09:31
采纳率: 0%
浏览 13.1k

(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条回答 默认 最新

  • qq_37793251 2017-03-07 02: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 2017-03-13 06:07

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

    评论
    解决 无用
    打赏 举报
  • 银枝 2019-08-14 17:08

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

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题