CSS 带有响应式表格的引导面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22971906/
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 panel with responsive table inside
提问by Zack Gao
Here is a JS Bin link: http://jsbin.com/qiziyupo/4/edit?output
这是一个 JS Bin 链接：http: //jsbin.com/qiziyupo/4/edit?output
The responsive table does not shrink to fit the panel. How can I fix this?
响应式表不会缩小以适应面板。我怎样才能解决这个问题？
EDIT: I'm looking for a solution where the responsive table will resize to fit inside the panel, without having to make the panel larger.
编辑：我正在寻找一种解决方案，其中响应表将调整大小以适应面板，而不必使面板变大。
回答by Schmalzy
The .table-responsiveclass is only designed to be responsive on mobile devices...
该.table-responsive课程仅设计为在移动设备上响应...
From the Bootstrap 3.1.1 documentation...
来自 Bootstrap 3.1.1 文档...
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables
通过将任何 .table 包装在 .table-responsive 中来创建响应式表格，使它们水平滚动到小型设备（768px 以下）。在任何大于 768px 宽的物体上查看时，您将看不到这些表格中的任何差异
But you can add the class into your css without the media query and get the functionality at any viewport.
但是您可以在没有媒体查询的情况下将该类添加到您的 css 中，并在任何视口获得该功能。
But note that this does not shrink the table, it only gives a horizontal scroll bar...
但请注意，这不会缩小表格，它只会提供一个水平滚动条...
Below is the .table-responsiveclasses from Bootstrap without the media query restricting it to 768px and below.
下面是.table-responsive来自 Bootstrap的类，没有媒体查询将其限制为 768px 及以下。
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
-webkit-overflow-scrolling: touch;
}
.table-responsive>.table {
margin-bottom: 0;
}
.table-responsive>.table>thead>tr>th,
.table-responsive>.table>tbody>tr>th,
.table-responsive>.table>tfoot>tr>th,
.table-responsive>.table>thead>tr>td,
.table-responsive>.table>tbody>tr>td,
.table-responsive>.table>tfoot>tr>td {
white-space: nowrap;
}
There are a few more CSS rules for .table-borderedthat I did not include...
还有一些.table-bordered我没有包括的CSS 规则......
回答by chetan
<div class="panel-body" style="overflow:scroll">
<table class="table table-bordered">
Just write this for table horizontal scrolling in the panel body.
只需为面板主体中的表格水平滚动编写此内容即可。
回答by Manjush
Better not to use panel-body, Put the table inside the panel tag, not to use Panel Body
最好不要使用panel-body，把table放在panel标签里面，不要使用Panel Body
回答by Khasan 24-7
Using container also has an impact on it. If Your layout does not have fixed layout, use container-fluid, and there will not be any problem with responsiveness of .tableclass.
使用容器也会对其产生影响。如果您的布局没有固定布局，请使用container-fluid，并且.table类的响应性不会有任何问题。
回答by Luca Detomi
This happens beacuse Panel has this class:
这是因为 Panel 有这个类：
.col-md-3 {
width: 25%;
}
that force its width. Remove it and eveything will be ok :-)
这迫使它的宽度。删除它，一切都会好的:-)
