如何在引入Bootstrap样式后实现无边框表格？

你用的是Bootstrap 3.4.1版本，这个版本里根本没有table-borderless类——这个类是Bootstrap 4才新增的，所以你加了这个类也没用，引入Bootstrap样式后，默认的表格边框样式会生效，导致边框藏不住。

下面给你两种解决办法：

方法一：自定义CSS覆盖样式 #

直接写自定义样式，强制去掉表格、表头、单元格的边框，优先级比Bootstrap默认样式高：

/* 自定义无边框表格样式 */
.table-no-border {
  border: none !important;
}
.table-no-border th,
.table-no-border td {
  border: none !important;
}

然后把表格的类改成table table-no-border，同时可以去掉HTML里的border="0"（CSS控制更规范）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.table-no-border {
  border: none !important;
}
.table-no-border th,
.table-no-border td {
  border: none !important;
}
</style>

<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" id="fromDT" value="22-2-2022" />
      <input class=" form-control toDT" type="date" name="toDT" id="toDT" value="11-1-2000" />
      <input type="submit" id="btn-save" class="btn btn-danger form-control btn-save" value="Submit" name="SEARCH">
    </div>
  </form>
  <br><br><br>

  <div class="table-responsive">
    <table class="table table-no-border" 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>
    </table>
  </div>

方法二：升级到Bootstrap 4及以上版本 #

如果你可以升级Bootstrap版本，换成4.x或5.x的CDN，那直接用table-borderless类就能生效，比如换成Bootstrap 5的CDN：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

这时候你的原有表格代码里的table table-borderless就能正常隐藏边框了。

内容的提问来源于stack exchange，提问作者Al-Iraqi