bootstrap table without borders

Question

Trying to show bootstrap table without borders. When I remove (bootstrap.min.css) then I can hide borders but when add it , can't hide borders

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<div class="container">
  <form action="" method="POST">
    <div class="mb-3" style="width:100%;">
      <input class=" form-control fromDT" style="width:100%;" type="date" name="fromDT" style="" id="fromDT" value="22-2-2022" />
      <input class=" form-control toDT" type="date" name="toDT" style="" id="toDT" value="11-1-2000" />
      <input type="submit" id="btn-save" class="btn btn-danger form-control btn-save" style="" value="Submit" name="SEARCH">
    </div>
  </form>
  <br><br><br>

  <div class="table-responsive">
    <table class="table table-borderless" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th class="not_mapped_style" style="line-height:0; text-align:center">ID</th>
        <th class="not_mapped_style" style="line-height:0; text-align:center">date</th>
        <th class="not_mapped_style" style="line-height:0; text-align:center">ref </th>
        <th class="not_mapped_style" style="line-height:0; text-align:center">amount</th>
        <th class="not_mapped_style" style="line-height:0; text-align:center">income</th>
        <th class="not_mapped_style" style="line-height:0; text-align:center">Balance</th>
      </tr>
      <tr>
        <td style="line-height:0;  text-align:center"><b>433</b></td>
        <td style="line-height:0;  text-align:center">22-2-2022</td>
        <td style="line-height:0;  text-align:center">44332</td>
        <td style="line-height:0;  text-align:center">443</td>
        <td style="line-height:0;  text-align:center">1111</td>
        <td style="line-height:0;  text-align:center">899989</td>
      </tr>
      <tr>
        <td style="line-height:0;  text-align:center">100</td>
        <td style="line-height:0;  text-align:center">22-2-2024</td>
        <td style="line-height:0;  text-align:center">4333</td>
        <td style="line-height:0;  text-align:center">400$</td>
        <td style="line-height:0;  text-align:center">0</td>
        <td style="line-height:0;  text-align:center">1600$</td>
      </tr>
      <tr>
        <td style="line-height:0;  text-align:center">100</td>
        <td style="line-height:0;  text-align:center">22-2-2024</td>
        <td style="line-height:0;  text-align:center">4333</td>
        <td style="line-height:0;  text-align:center">400$</td>
        <td style="line-height:0;  text-align:center">0</td>
        <td style="line-height:0;  text-align:center">1600$</td>
      </tr>
  </div>

Answer 1

I used this CSS code:

<style>
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid rgba(221, 221, 221, 0)!important;
}

.table>thead>tr>th {
vertical-align: bottom;
border-bottom: 2px solid rgba(221, 221, 221, 0)!important;
}
</style>