如何移除Bootstrap表格首单元格的顶部边框？

需要移除表格首单元格（"Prices"所在单元格）的顶部边框，已尝试多种方法未解决，期望实现如目标效果图所示的样式。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"/>
<br/>
<br/>
<br/>
<table class="table table-bordered text-center ">
  <thead class="">
    <tr>
      <td class="bg bg-white invisble border-0"></td>
      <th colspan="8">
        Attribute Name
      </th>
    </tr>
    <tr>
      <th scope="col" style="vertical-align: middle;" rowspan="2">Prices</th>
      <th scope="col" colspan="2">Attribute Value1</th>
      <th scope="col" colspan="2">Attribute Value2</th>
      <th scope="col" colspan="2">Attribute Value3</th>
      <th scope="col" colspan="2">Attribute Value4</th>
    </tr>
    <tr>
      <th>Credit</th>
      <th>Cash</th>
      <th>Credit</th>
      <th>Cash</th>
      <th>Credit</th>
      <th>Cash</th>
      <th>Credit</th>
      <th>Cash</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">price category 1</th>
      <td>2500.00</td>
      <td>3400.00</td>
      <td>1500.50</td>
      <td>1200.00</td>
      <td>7800.12</td>
      <td>1578.34</td>
      <td>1000.00</td>
      <td>1200.00</td>

    </tr>
    <tr>
      <th scope="row">price category 2</th>
      <td>1200.00</td>
      <td>7800.12</td>
      <td>1568.34</td>
      <td>1000.00</td>
      <td>2500.00</td>
      <td>3400.00</td>
      <td>1500.50</td>
      <td>1200.00</td>
    </tr>
    <tr>
      <th scope="row">price category 3</th>
      <td>1000.00</td>
      <td>2500.00</td>
      <td>3400.00</td>
      <td>1500.50</td>
      <td>1200.00</td>
      <td>1200.00</td>
      <td>7800.12</td>
      <td>1568.34</td>
    </tr>
  </tbody>
</table>

问题原因 #

"Prices"单元格的顶部边框来自Bootstrap表格的全局边框样式，且上方空单元格的类名拼写错误（invisble应为invisible），导致其样式未完全生效，间接影响了下方单元格的边框显示。

修改步骤 #

1. 修正空单元格的类名拼写错误，确保其完全隐藏；
2. 添加自定义CSS类，强制覆盖Bootstrap的边框样式，移除目标单元格的顶部边框。

修改后代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"/>
<style>
  .no-top-border {
    border-top: 0 !important;
  }
</style>
<br/>
<br/>
<br/>
<table class="table table-bordered text-center ">
  <thead class="">
    <tr>
      <td class="bg-white invisible border-0"></td>
      <th colspan="8">
        Attribute Name
      </th>
    </tr>
    <tr>
      <th scope="col" style="vertical-align: middle;" rowspan="2" class="no-top-border">Prices</th>
      <th scope="col" colspan="2">Attribute Value1</th>
      <th scope="col" colspan="2">Attribute Value2</th>
      <th scope="col" colspan="2">Attribute Value3</th>
      <th scope="col" colspan="2">Attribute Value4</th>
    </tr>
    <tr>
      <th>Credit</th>
      <th>Cash</th>
      <th>Credit</th>
      <th>Cash</th>
      <th>Credit</th>
      <th>Cash</th>
      <th>Credit</th>
      <th>Cash</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">price category 1</th>
      <td>2500.00</td>
      <td>3400.00</td>
      <td>1500.50</td>
      <td>1200.00</td>
      <td>7800.12</td>
      <td>1578.34</td>
      <td>1000.00</td>
      <td>1200.00</td>

    </tr>
    <tr>
      <th scope="row">price category 2</th>
      <td>1200.00</td>
      <td>7800.12</td>
      <td>1568.34</td>
      <td>1000.00</td>
      <td>2500.00</td>
      <td>3400.00</td>
      <td>1500.50</td>
      <td>1200.00</td>
    </tr>
    <tr>
      <th scope="row">price category 3</th>
      <td>1000.00</td>
      <td>2500.00</td>
      <td>3400.00</td>
      <td>1500.50</td>
      <td>1200.00</td>
      <td>1200.00</td>
      <td>7800.12</td>
      <td>1568.34</td>
    </tr>
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者Chamidu Purage