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

I have a Bootstrap table, I want to remove the lines between some of the rows in the table (at the end of the table) is there a quick way to achieve this?

我有一个Bootstrap表,我想删除表中某些行之间的行(在表的末尾)是否有快速实现此方法?

4 个解决方案

#1

You can remove the border from Bootstrap tables using the following CSS:

您可以使用以下CSS从Bootstrap表中删除边框:

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

This will override Bootstrap's td and th selector specificity and apply your border-top style instead of theirs.

这将覆盖Bootstrap的td和th选择器特异性并应用你的边框顶部样式而不是他们的。

Note that this will only apply to tr elements within the tbody. You'll need to add in styling for the thead and tfoot elements if you want this to work for those as well.

请注意,这仅适用于tbody中的tr元素。你需要为thead和tfoot元素添加样式,如果你想让它也适用于那些。

Now where you specify some of the rows, I'm guessing you don't want this applying to all of them. For that, simply add a new class to the tr elements you wish remove the border on, and include that class name in your CSS selector(s):

现在你指定了一些行,我猜你不希望这适用于所有行。为此,只需向要删除边框的tr元素添加一个新类,并在CSS选择器中包含该类名:

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

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

#2

You may use border-bottom: none; in your right selector. Please provide your html code so that we can figure out and analyze your structure.

你可以使用border-bottom:none;在你的右选择器。请提供您的HTML代码,以便我们可以找出并分析您的结构。

#3

For the rows in which you don't want border's to appear. Give them an additional class and add the border:none property to it.

对于您不希望出现边框的行。给它们一个额外的类,并添加border:none属性。

For Ex : If you give the additional class name as .noborder to the element of the row.

对于Ex:如果将附加类名称.noborder作为行的元素。

Hope this helps you.

希望这对你有所帮助。

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

#4

-3

i think you want to remove two remove vertical line between two row or column go through this link to see demo LInk :- http://v4-alpha.getbootstrap.com/content/tables/

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

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

你也可以申请.table> tbody> tr.no-border> td,.table> tbody> tr.no-border> th {border-top:none; }

#1