如何在引导程序 3 中向响应式表添加边框

Question

我在使用引导程序向响应式表添加边框时遇到问题。

<div class="panel">
    <div class="table-responsive text-center">
    <table class="table table-bordered">
        <thead> ... </thead>
        <tbody> ... </tbody>
    </table>
    </div>
</div>

仅当我删除"表响应"类时，边框表才有效。

我的代码缺少什么，所以它也适用于这个类？

Answer 1

似乎您的面板类有一个 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>

或者，您可以删除面板类并使用其他内容。这也可能奏效。您可以随时查看检查元素以查看任何元素正在使用哪些类和哪些 CSS 属性。

不过，你不会得到边界。此外，请确保表格的边框颜色和背景颜色不同。

Answer 2

我也偶然看到了这个问题。非常有趣的是，我发现：

在媒体查询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推荐的方式使用它。