如何在Bootstrap 3中为响应表添加边框

Question

我在使用bootstrap向响应表添加边框时遇到问题。

<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>

或者您可以删除面板类并使用其他内容。这也可能有用。您始终可以查看inspect元素以查看哪些类以及任何元素使用的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推荐的那样使用它。