twitter-bootstrap 如何在 Bootstrap 3 中为响应式表格添加边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37421676/
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
How to add borders to a Responsive Table in Bootstrap 3
提问by Jorge Cuevas
I'm having trouble with adding borders to a responsive table using bootstrap.
我在使用引导程序向响应式表格添加边框时遇到问题。
<div class="panel">
<div class="table-responsive text-center">
<table class="table table-bordered">
<thead> ... </thead>
<tbody> ... </tbody>
</table>
</div>
</div>
The bordered table works only if I remove the "table-responsive" class.
只有当我删除“表格响应”类时，带边框的表格才有效。
What is my code missing so it works with this class as well class?
我的代码缺少什么，所以它适用于这个类以及类？
回答by Lahar Shah
Seems like your panel class has one CSS property
好像你的面板类有一个 CSS 属性
.panel>.table-bordered, .panel>.table-responsive>.table-bordered {border:0;}
.panel>.table-bordered, .panel>.table-responsive>.table-bordered {border:0;}
and that makes your table's outer border invisible. You can explicitly provide
这使您的桌子的外边框不可见。您可以明确提供
border: 1px solid #ddd !important;if necessary.
border: 1px solid #ddd !important;如有必要。
<div class="panel">
<div class="table-bordered table-responsive text-center">
<table class="table table-bordered" style="border: 1px solid #ddd !important;">
<thead> ... </thead>
<tbody> ... </tbody>
</table>
</div>
</div>
Or you can remove the panel class and use something else. That might also work. You can always look to inspect element to see what classes and what CSS property any element is using.
或者您可以删除面板类并使用其他东西。这也可能奏效。您可以随时查看元素以查看任何元素使用的类和 CSS 属性。
Still, you won't get the border. Also, make sure that the table's border color and background color are not the same.
不过，你不会得到边界。另外，请确保表格的边框颜色和背景颜色不同。
回答by jlwangPoincare
I also see this issue by chance. It is very interesting that I found:
我也是偶然看到这个问题的。我发现很有趣：
inside a media query screen and (max-width: 767px), which means on a narrow-screen device,
or inside a panel,
在媒体查询内screen and (max-width: 767px)，这意味着在窄屏设备上，或在面板内，
.table-responsive > .table-borderedare set to have no borders in Bootstrap3. I don't know any reason for Bootstrap intentionally doing this.
.table-responsive > .table-bordered在 Bootstrap3 中设置为没有边框。我不知道 Bootstrap 故意这样做的任何原因。
That part of Bootstrap3 source code looks like:
Bootstrap3 源代码的那部分看起来像：
@media screen and (max-width: 767px) {
...
.table-responsive > .table-bordered {
border: 0;
}
...
}
.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
border: 0;
}
Update: I kind of know the reason why Bootstrap is doing that. For narrow screen, <div class="table-responsive">has a border itself. Also, if a bordered table is a direct child of <div class="panel">, the panel would act like a border of that table. So Bootstrap intentionally removed the outer border of your table inside these divs.
更新：我有点知道 Bootstrap 这样做的原因。对于窄屏，<div class="table-responsive">本身有边框。此外，如果带边框的表是 的直接子代<div class="panel">，则面板将充当该表的边框。因此，Bootstrap 有意删除了这些 div 中表格的外边框。
You are not missing anything in your code. You are just not using it the way Bootstrap recommends.
您的代码中没有遗漏任何内容。您只是没有按照 Bootstrap 推荐的方式使用它。
