Bootstrap 3表内溢出的面板

Question

 <div class="col-xs-6 col-sm-4">
         <div class="panel panel-primary">
          <div class="panel-heading">Recently Filtered</div>
          <table class="table table-striped">
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
          </table>
        </div>
</div>

当我放大时,面板内的表格溢出,这是一个图片示例

适应这个问题的适当标记是什么？我知道它可以正确地扩展.

Answer 1

您始终可以.table-responsive向表中添加类以使其水平滚动.例:

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

如果这不是你想要的,你需要降低字体大小以使其更合适.

Answer 2

它似乎只发生在视口响应移动大小时.最简单的解决方法是添加overflow规则.

.panel {
    overflow: auto;
}

您还可以更改字体大小或删除不需要的表格单元格.你也可以缩写

• ID
• 温度
• V
• 日期