Html Bootstrap 3 面板内的表溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25071030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Table inside a panel overflowing
提问by Aaron
<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.
解决这个问题的正确标记是什么？我知道它肯定可以正确扩展。
回答by South Paw
You could always add .table-responsiveclass to the table to get it scroll horizontally. Example:
您始终可以.table-responsive向表中添加类以使其水平滚动。例子：
<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.
如果这不是您想要的，则需要降低字体大小以使其更适合。
回答by Todd
it appears to only happen when the viewport has responded down to mobile sizes. The easiest fix is to add overflowrule.
它似乎只有在视口对移动尺寸做出响应时才会发生。最简单的解决方法是添加overflow规则。
.panel {
overflow: auto;
}
you could also change font sizes or remove unneeded table cells. You could also abbreviate
您还可以更改字体大小或删除不需要的表格单元格。你也可以缩写
- ID
- Temp
- V
- Date
- ID
- 温度
- 伏
- 日期
回答by Glaucius Zacher
Just an idea, you tryed to add a div with class panel-body around the table?
只是一个想法，您尝试在桌子周围添加一个带有类面板主体的 div？
