Bootstrap table without stripe / borders

Question

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

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

similar to the rest, but more specific:

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

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.

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.

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.