内置响应表的Bootstrap面板

Question

这是一个JS Bin链接:http://jsbin.com/qiziyupo/4/edit？output

响应表不会收缩以适合面板.我怎样才能解决这个问题？

编辑:我正在寻找一个解决方案,响应表将调整大小以适应面板内部,而不必使面板更大.

Answer 1

该.table-responsive课程仅针对移动设备进行响应......

从Bootstrap 3.1.1文档......

通过在.table-responsive中包装任何.table来创建响应式表,使它们水平滚动到小型设备(768px以下).在大于768px宽的任何东西上观看时,您将看不到这些表中的任何差异

但是您可以在没有媒体查询的情况下将类添加到css中,并在任何视口中获取功能.

但请注意,这不会缩小表格,它只给出一个水平滚动条...

以下是.table-responsiveBootstrap 的类,没有媒体查询将其限制为768px及以下.

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

.table-responsive>.table { 
    margin-bottom: 0;
}

.table-responsive>.table>thead>tr>th, 
.table-responsive>.table>tbody>tr>th, 
.table-responsive>.table>tfoot>tr>th, 
.table-responsive>.table>thead>tr>td, 
.table-responsive>.table>tbody>tr>td, 
.table-responsive>.table>tfoot>tr>td {
    white-space: nowrap;
}

还有一些.table-bordered我没有包含的CSS规则......

Answer 2

<div class="panel-body" style="overflow:scroll">            
  <table class="table table-bordered">

只需在面板主体中为表格水平滚动编写此代码即可。