Remove Row Lines in Twitter Bootstrap

Remove row lines in twitter bootstrap

Add this to your main CSS:

table td {
    border-top: none !important;
}

Use this for newer versions of bootstrap:

.table th, .table td { 
     border-top: none !important; 
 }

Remove the first line of a twitter bootstrap table

.table > tbody > tr:first-child > td {
    border: none;
}

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
table {    margin-top: 50px;}
.table > thead > tr:first-child > td, .table > tbody > tr:first-child > td {    border: none;}

<table class="table table-no-border">    <tbody>
      <tr>
        <td>Abos Girolamo</td>      </tr>
      <tr>
        <td>Aboulker Isabelle</td>      </tr>
      <tr>
        <td>Adam Adolphe</td>      </tr></tbody></table>

In a bootstrap table how remove lines between rows?

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

bootstrap table-bordered remove horizontal line

Just add these css rules in your css file (remove the border from the td and add again to the right side):

.table-bordered td {border: none !important; border-right: solid 1px #ccc !important;}

.table-bordered td {  border: none !important;  border-right: solid 1px #ccc !important;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><div class="container">  <div class="row">    <div class="col-md-12">      <table class="table table-bordered">        <thead>          <tr>            <th>First Name</th>            <th>Last Name</th>          </tr>        </thead>        <tbody>          <tr>            <td>Otto</td>            <td>@mdo</td>          </tr>          <tr>            <td>Otto</td>            <td>@TwBootstrap</td>          </tr>          <tr>            <td>Thornton</td>            <td>@fat</td>          </tr>        </tbody>      </table>    </div>  </div></div>

Trying to remove a horizontal line in a bootstrap 3 table

.borderless > thead > tr > th,
.borderless > tbody > tr > th,
.borderless > tfoot > tr > th,
.borderless > thead > tr > td,
.borderless > tbody > tr > td,
.borderless > tfoot > tr > td {
  border-top: none;
}

This is how to do it without !important tag.

how to remove horizontal border of a table in bootstrap

Never use !important as it is a bad practice. The solution for your question is

.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > td,
.table-bordered {
    border-bottom: 0;
    border-top: 0;
}

All the horizontal borders are gone and only the vertical borders are left.

Bootstrap table without stripe / borders

The border styling is set on the td elements.

html:

<table class='table borderless'>

css:

.borderless td, .borderless th {
    border: none;
}

Update: Since Bootstrap 4.1 you can use .table-borderless to remove the border.

https://getbootstrap.com/docs/4.1/content/tables/#borderless-table

---

Related Topics