Bootstrap table without stripe / borders

Question

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 w

Answer 1

This one worked for me.

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

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

Answer 2

similar to the rest, but more specific:

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

Answer 3

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

<table class='table table-borderless'>

Answer 4

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

Answer 5

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.

Answer 6

Use hidden instead of none:

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