带有horizo​​nascroll的Bootstrap响应表

Question

我正在使用responsive-table带有近百列的bootstrap 3 .由于列数太多,它不适合我的电脑屏幕.

根据响应表上的bootstrap 文档,一个宽度为768px或更小的设备/屏幕将为这些表格提供水平滚动条,其余的则不会.

有没有办法使滚动工作即使在笔记本电脑/台式机屏幕上？

Answer 1

您可以table-responsive通过模仿自己的CSS 来覆盖Bootstrap样式类的方式.对于低于768px的分辨率,Bootstrap应用以下样式:

/* Bootstrap.css */
@media screen and (max-width: 767px) {
    ...

    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #DDD;
    }
}

因此,如果您希望在大于768px的分辨率上应用相同的行为,您可以在自己的样式中复制它:

/* Your CSS */
.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #DDD;
}