html - 在 Bootstrap 表中如何删除行之间的行？

Question

我有一个 Bootstrap 表，我想删除表中某些行之间的线(在表的末尾)，有没有一种快速的方法可以实现这一点？

Answer 1

您可以使用以下 CSS 删除 Bootstrap 表格的边框:

.table>tbody>tr>td,
.table>tbody>tr>th {
  border-top: none;
}

这将覆盖 Bootstrap 的 td 和 th 选择器 specificity并应用您的 border-top 样式而不是他们的样式。

请注意，这仅适用于 tbody 中的 tr 元素。如果您希望它也适用于这些元素，则需要为 thead 和 tfoot 元素添加样式。

现在，在您指定一些 行的位置，我猜您不希望将其应用于所有行。为此，只需将新的 class 添加到您希望删除边框的 tr 元素，并将该类名称包含在您的 CSS 选择器中:

<tr class="no-border">...</tr>

.table>tbody>tr.no-border>td,
.table>tbody>tr.no-border>th {
  border-top: none;
}