[html] Bootstrap table without stripe / borders

I'm kinda stuck with a CSS problem while using Bootstrap. I'm also using Angular JS with Angular UI.bootstrap (which might be part of the problem).

I'm making a website that displays data in a table. Sometime, the data contains object that I have to display in tables. So I want to put borderless tables inside a normal table while keeping inside separation lines for the borderless tables.

But it seems that even if I specifically say to not show the borders on a table, it is forced:

HTML:

<table class='table borderless'>

CSS:

.borderless table {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

So here, what I want is just the inside borders.

similar to the rest, but more specific:

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

In some cases, one must also use border-spacing in the table class, like:

border-spacing: 0 !important;

Using Bootstrap 3.2.0 I had problem with Brett Henderson solution (borders were always there), so I improved it:

HTML

<table class="table table-borderless">

CSS

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

This one worked for me.

<td style="border-top: none;">;

The key is you need to add border-top to the <td>

Install bootstrap either with npm or cdn link

<table class="table table-borderless">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
  </tr>
  <tr>
  <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
   </tr>
 </tbody>
</table>

get the reference with this link

Most examples seem to be too specific and/or bloated.

Here was my trimmed down solution using Bootstrap 4.0.0 (4.1 includes .table-borderless but still alpha)...

.table-borderless th{border:0;}
.table-borderless td{border:0;}

Similar to many proposed solutions, but minimal bytes

Note: Ended up here because I was viewing BS4.1 references and couldn't figure out why .table-borderless was not working with my 4.0 sources (eg: operator error, duh)

I expanded the Bootstrap table styles as Davide Pastore did, but with that method the styles are applied to all child tables as well, and they don't apply to the footer.

A better solution would be imitating the core Bootstrap table styles, but with your new class:

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

Then when you use <table class='table table-borderless'> only the specific table with the class will be bordered, not any table in the tree.

Try this:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

Note: What you were doing before was not working because your css code was targeting a table within your .borderless table (which probably didn't exist)

Use hidden instead of none:

.hide-bottom {
    border-bottom-style: hidden;
}

I know this is an old thread and that you've picked an answer, but I thought I'd post this as it is relevant for anyone else that is currently looking.

There is no reason to create new CSS rules, simply undo the current rules and the borders will disappear.

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

going forward, anything styled with

    .table

will show no borders.

Since Bootstrap v4.1 you can add table-borderless to your table, see official documentation:

<table class='table table-borderless'>

In my CSS:

.borderless tr td {
    border: none !important;
    padding: 0px !important;
}

In my directive:

<table class='table borderless'>
    <tr class='borderless' ....>

I didn't put the 'borderless' for the td element.

Tested and it worked! All the borders and paddings are completely stripped off.

Bootstrap supports scss, and he has a special variables. If this is a case then you can add in your main variables.scss file

$table-border-width: 0;

More info here https://github.com/twbs/bootstrap/blob/6ffb0b48e455430f8a5359ed689ad64c1143fac2/scss/_variables.scss#L347-L380

Use the border- class from Boostrap 4

<td class="border-0"></td>

or

<table class='table border-0'></table>

Be sure to end the class input with the last change you want to do.

I'm late to the game here but FWIW: adding .table-bordered to a .table just wraps the table with a border, albeit by adding a full border to every cell.

But removing .table-bordered still leaves the rule lines. It's a semantic issue, but in keeping with BS3+ nomenclature I've used this set of overrides:

.table.table-unruled>tbody>tr>td,_x000D_
.table.table-unruled>tbody>tr>th {_x000D_
  border-top: 0 none transparent;_x000D_
  border-bottom: 0 none transparent;_x000D_
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">_x000D_
<div class="container">_x000D_
  <div class="row">_x000D_
    <div class="col-xs-5">_x000D_
      .table_x000D_
      <table class="table">_x000D_
        <thead>_x000D_
          <tr>_x000D_
            <th>a</th>_x000D_
            <th>b</th>_x000D_
            <th>c</th>_x000D_
          </tr>_x000D_
        </thead>_x000D_
        <tbody>_x000D_
          <tr>_x000D_
            <td>a</td>_x000D_
            <td>b</td>_x000D_
            <td>c</td>_x000D_
          </tr>_x000D_
          <tr>_x000D_
            <td>a</td>_x000D_
            <td>b</td>_x000D_
            <td>c</td>_x000D_
        </tbody>_x000D_
        <tfoot>_x000D_
          <tr>_x000D_
            <th>a</th>_x000D_
            <th>b</th>_x000D_
            <th>c</th>_x000D_
          </tr>_x000D_
        </tfoot>_x000D_
      </table>_x000D_
    </div>_x000D_
    <div class="col-xs-5 col-xs-offset-1">_x000D_
      <table class="table table-bordered">_x000D_
        .table .table-bordered_x000D_
        <thead>_x000D_
          <tr>_x000D_
            <th>a</th>_x000D_
            <th>b</th>_x000D_
            <th>c</th>_x000D_
          </tr>_x000D_
        </thead>_x000D_
        <tbody>_x000D_
          <tr>_x000D_
            <td>a</td>_x000D_
            <td>b</td>_x000D_
            <td>c</td>_x000D_
          </tr>_x000D_
          <tr>_x000D_
            <td>a</td>_x000D_
            <td>b</td>_x000D_
            <td>c</td>_x000D_
        </tbody>_x000D_
        <tfoot>_x000D_
          <tr>_x000D_
            <th>a</th>_x000D_
            <th>b</th>_x000D_
            <th>c</th>_x000D_
          </tr>_x000D_
        </tfoot>_x000D_
      </table>_x000D_
    </div>_x000D_
  </div>_x000D_
_x000D_
  <div class="row">_x000D_
    <div class="col-xs-5">_x000D_
      <table class="table table-unruled">_x000D_
        .table .table-unruled_x000D_
        <thead>_x000D_
          <tr>_x000D_
            <th>a</th>_x000D_
            <th>b</th>_x000D_
            <th>c</th>_x000D_
          </tr>_x000D_
        </thead>_x000D_
        <tbody>_x000D_
          <tr>_x000D_
            <td>a</td>_x000D_
            <td>b</td>_x000D_
            <td>c</td>_x000D_
          </tr>_x000D_
          <tr>_x000D_
            <td>a</td>_x000D_
            <td>b</td>_x000D_
            <td>c</td>_x000D_
        </tbody>_x000D_
        <tfoot>_x000D_
          <tr>_x000D_
            <th>a</th>_x000D_
            <th>b</th>_x000D_
            <th>c</th>_x000D_
          </tr>_x000D_
        </tfoot>_x000D_
      </table>_x000D_
    </div>_x000D_
    <div class="col-xs-5 col-xs-offset-1">_x000D_
      <table class="table table-bordered table-unruled">_x000D_
        .table .table-bordered .table-unruled_x000D_
        <thead>_x000D_
          <tr>_x000D_
            <th>a</th>_x000D_
            <th>b</th>_x000D_
            <th>c</th>_x000D_
          </tr>_x000D_
        </thead>_x000D_
        <tbody>_x000D_
          <tr>_x000D_
            <td>a</td>_x000D_
            <td>b</td>_x000D_
            <td>c</td>_x000D_
          </tr>_x000D_
          <tr>_x000D_
            <td>a</td>_x000D_
            <td>b</td>_x000D_
            <td>c</td>_x000D_
        </tbody>_x000D_
        <tfoot>_x000D_
          <tr>_x000D_
            <th>a</th>_x000D_
            <th>b</th>_x000D_
            <th>c</th>_x000D_
          </tr>_x000D_
        </tfoot>_x000D_
      </table>_x000D_
    </div>_x000D_
  </div>_x000D_
_x000D_
</div>

Don’t add the .table class to your <table> tag. From the Bootstrap docs on tables:

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.