How to remove border from a bootstrap table-responsive?

Question

Hello I'm trying to remove border from my table.

Here's my code :

<table class="table table-responsive" style="border:none"> 
     <tr>
        <th>First name</th>
        <th>Last name </th>
     </tr> 
     <tr>
        <td>Tima</td>
        <td>Zahra</td>
     </tr> 
     <tr>
        <td>Emily</td>
        <td>SMITH</td>
     </tr> 
</table>

But it's not working. Please help me ! I'm sorry for my bad english and I hope you will understand it.

Solution 1

Just use following css:

.table thead tr th, .table tbody tr td {
    border: none;
}

Solution 2

Use the table-borderless bootstrap class. Note my table below has zebra stripes, but that is because I wanted them and has no impact on the table border. If you don't want stripes either, just remove table-striped.

<table class="table table-striped table-borderless">
<thead>
<tr>
<th scope="col">Pos</th>
<th scope="col">Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Adam</td>
</tr>
</tbody>
</table>

Solution 3

Just do following changes in head section

<style>
  .borderless tr, .borderless td, .borderless th {
    border: none !important;
   }
</style>

and this changes in body section:

<table class="table table-responsive borderless"> 
             <tr> <th>First name</th><th>Last name </th></tr> 
             <tr> <td>Tima</td> <td>Zahra</td> </tr> 
             <tr><td>Emily</td> <td>SMITH</td> </tr> 
</table>

This will helpful to you. Thank you :)