In a bootstrap table how remove lines between rows?

Question

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?

Answer 1

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

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

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.

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 class="no-border">...</tr>

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

Answer 2

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.

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

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>