在引导表中如何删除行之间的线？

Question

我有一个 Bootstrap 表，我想删除表中某些行之间的行（在表的末尾）有没有快速的方法可以实现此目的？

Answer 1

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

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

这将覆盖 Bootstrap 的

td

和

th

选择器 特异性 并应用您的

border-top

样式而不是他们的样式。

请注意，这仅适用于

tr

中的

tbody

元素。如果您希望它也适用于这些元素，您需要为

thead

和

tfoot

元素添加样式。

现在您指定了 some 行，我猜您不希望这适用于所有行。为此，只需将新的

class

添加到您希望删除边框的

tr

元素，并在 CSS 选择器中包含该类名称：

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

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

Answer 2

对于您不希望出现边框的行。给他们一个额外的 class 并为其添加 border:none 属性。

例如：如果您将附加类名称作为 .noborder 指定给行的 元素。

希望这对您有帮助。

.noborder{
border:none;

}

<table border="1" width="100%">
  <tr><td>Data 1</td></tr>
  <tr><td>Data 1</td></tr>
  <tr ><td>Data 1</td></tr>
  <tr><td class="noborder">Data 1</td></tr>
  <tr><td class="noborder">Data 1</td></tr>
  
  </table>

Answer 3

您可以在

右侧选择器

中使用border-bottom: none;。请提供您的html代码，以便我们找出并分析您的结构。

Answer 4

  <table class="table no-border">
      <tr>
          <td></td>
      </tr>
  </table>

Answer 5

对于 react-bootstrap 添加 className

table-borderless

就可以了。

例如：

<Table className="table-borderless"></Table>

Answer 6

我想你想删除两行或两列之间的两条垂直线 通过此链接查看演示链接：- http://v4-alpha.getbootstrap.com/content/tables/

您也可以申请 .table>tbody>tr.no-border>td, .table>tbody>tr.no-border>th { 顶部边框：无； }