Bootstrap 3 Table inside a panel overflowing
-
26-12-2019 - |
سؤال
<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.
المحلول
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.
نصائح أخرى
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
Just an idea, you tryed to add a div with class panel-body around the table?
لا تنتمي إلى StackOverflow