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建议的那样使用它。

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

2 个答案: