Bootstrap 3 Table inside a panel overflowing

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>

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.

Answer 1

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.

Answer 2

it appears to only happen when the viewport has responded down to mobile sizes. The easiest fix is to add overflow rule.

.panel {
    overflow: auto;
}

you could also change font sizes or remove unneeded table cells. You could also abbreviate

• ID
• Temp
• V
• Date

Answer 3

Just an idea, you tryed to add a div with class panel-body around the table?