如何在 bootstrap 中去除 <thead> 和 <tfoot> 的粗边框答案

【问题标题】：How to remove thick border from <thead> and <tfoot> in bootstrap如何在 bootstrap 中去除 <thead> 和 <tfoot> 的粗边框
【发布时间】：2023-02-16 20:46:55
【问题描述】：

如何从 bootstrap 4 中的 <thead> 和 <tfoot> 中删除相当不必要的粗边框？

我在 Bootstrap 5 中看到了关于它的论坛帖子，但我使用的是 bootstrap 4 并且该修复程序似乎对我不起作用。

谢谢！

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

要从 Bootstrap 4 中的 thead 和 tfoot 元素中删除粗边框，您可以通过添加一些自定义 CSS 来覆盖默认边框样式。以下是如何删除边框的示例：

thead, tfoot {
  border-width: 0;
}

在上面的 CSS 中，我们将 thead 和 tfoot 元素的 border-width 属性设置为 0。这将删除 Bootstrap 4 添加的粗边框。

您可以将此 CSS 添加到您自己的自定义样式表中，也可以将其添加到 HTML 文件标头部分的标记中。例如：

<head>
  <meta charset="UTF-8">
  <title>My Bootstrap 4 Table</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <style>
    thead, tfoot {
      border-width: 0;
    }
  </style>
</head>

【讨论】：

【解决方案2】：

class="border border-5"

【讨论】：