<div class="table-responsive">
   <table class="table table-bordered">
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>
</div>

解决的方法就是把内容增多，或者调整浏览器的窗口查看效果
bootstrap表格响应式布局的话，当你的浏览器的可视区域小于768px时，表格底部会出现水平滚动条，当你的浏览器的可视区域大于768p时，表格顶部水平滚动条就会消失

<div class="table-responsive"></div>

1.table-responsive放在table的上一级

2.td里的内容增多

  才会出现滚动条！

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

源码默认纵轴隐藏，

要加在div上啊 然后用div包裹table

源码

.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}

overflow-x与overflow-y裁剪div元素中的溢出内容，实现滚动条

.table包裹在.table-responsive中即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。