CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
orestiss
orestiss

Reputation: 2283

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?

Upvotes: 5

Views: 19668

Answers (6)

Abhith Shaji
Abhith Shaji

Reputation: 647

For react-bootstrap adding the className table-borderless will do the trick.

eg :

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

Upvotes: 0

Mohammad Komaei
Mohammad Komaei

Reputation: 9656

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

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128786

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;
}

Upvotes: 11

Ankit Tajpara
Ankit Tajpara

Reputation: 76

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/

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

Upvotes: -3

5eeker
5eeker

Reputation: 1027

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>

Upvotes: 2

user6690322
user6690322

Reputation:

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.

Upvotes: 0

Related Questions