Bootstrap 3表里面的一个面板溢出 [英] Bootstrap 3 Table inside a panel overflowing

问题描述

 <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>

放大时面板中的表格溢出，下面是一个图片示例

The table inside a panel is overflowing when I zoom in, here's a picture example

有什么适当的标记适应这个问题？

What's the proper mark up accommodating this problem? I know that it can scale properly for sure.

推荐答案

您可以随时添加 .table-responsive 类到表中，以使其水平滚动。示例：

You could always add .table-responsive class to the table to get it scroll horizontally. Example:

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

如果这不是你想要的，你需要将字体大小降低到使它更适合。

If that isn't what you're wanting, you'll need to lower the font size to make it fit better.

这篇关于Bootstrap 3表里面的一个面板溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！