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
• 日期

Answer 3

只是一个想法，你试图在桌子周围添加一个带有类面板体的div？