orestiss orestiss - 9 months ago 83
CSS Question

In a bootstrap table how remove lines between rows?

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 Source

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

.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>th {
  border-top: none;