我在使用bootstrap向响应表添加边框时遇到问题。
<div class="panel">
<div class="table-responsive text-center">
<table class="table table-bordered">
<thead> ... </thead>
<tbody> ... </tbody>
</table>
</div>
</div>
边框表只有在我删除“表格响应”类时才有效。
什么是我的代码缺失所以它适用于这个类以及类?
看起来你的面板类有一个CSS属性
.panel>.table-bordered, .panel>.table-responsive>.table-bordered {border:0;}
这使你的桌子的外边界不可见。你可以明确提供
如有必要,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>
或者您可以删除面板类并使用其他内容。这也可能有用。您始终可以查看inspect元素以查看哪些类以及任何元素使用的CSS属性。
不过,你不会得到边界。此外,请确保表格的边框颜色和背景颜色不同。
我也偶然看到了这个问题。我发现非常有趣:
在媒体查询screen and (max-width: 767px)
中,这意味着在窄屏设备上,或在面板内,
.table-responsive > .table-bordered
设置为在Bootstrap3中没有边框。我不知道Bootstrap有意这样做的任何原因。
Bootstrap3源代码的那一部分如下所示:
@media screen and (max-width: 767px) {
...
.table-responsive > .table-bordered {
border: 0;
}
...
}
.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
border: 0;
}
更新:我知道Bootstrap正在这样做的原因。对于窄屏幕,<div class="table-responsive">
本身就有边框。此外,如果有边框的桌子是<div class="panel">
的直接子节点,则该面板将充当该表格的边框。因此,Bootstrap故意在这些div中移除了表的外边框。
您的代码中没有遗漏任何内容。您只是没有像Bootstrap推荐的那样使用它。