Bootstrap 5表格第三、四行底部边框显示异常求助

问题分析 #

你遇到的边框不一致问题，核心原因是外层表格使用了Bootstrap的table类，该类默认会给<tbody>内的行添加灰色实线底部边框，而嵌套表格里自定义的红色虚线边框和这个默认边框产生了视觉重叠，导致部分行的边框显示异常。

修复方案 #

方案1：移除嵌套表格所在单元格的内边距 #

给嵌套表格所在的<td>添加Bootstrap的p-0类，消除单元格内边距带来的边框错位：

<td style="width: 800px" colspan="4" class="p-0">
  <table class="table table-borderless">
    <!-- 嵌套表格内容 -->
  </table>
</td>

方案2：取消外层表格的默认边框 #

如果不需要外层表格的灰色边框，可以给外层表格添加table-borderless类：

<table class="table table-borderless">
  <!-- 外层表格内容 -->
</table>

方案3：自定义CSS覆盖外层行边框 #

通过自定义样式移除外层表格行的默认边框，避免和嵌套表格边框冲突：

#tbody > tr {
  border-bottom: none;
}

修改后完整代码示例 #

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    #tbody > tr {
      border-bottom: none;
    }
  </style>
</head>

<body>
  <table class="table">
    <thead>
      <tr style="font-size: 12px;">
        <th scope="col-auto" style="width: 25px; background-color: #f2f4f7;"><input type="checkbox" value=""></th>
        <th scope="col-auto" style="width: 450px; background-color: #f2f4f7;">Product Name & Store</th>
        <th scope="col-auto" style="width: 200px; background-color: #f2f4f7;">SKU</th>
        <th scope="col-auto" style="width: 200px; background-color: #f2f4f7;">Master SKU</th>
        <th scope="col-auto" style="width: 225px; background-color: #f2f4f7;">Price</th>
        <th scope="col-auto" style="width: 200px; background-color: #f2f4f7;">Stock</th>
        <th scope="col-auto" style="background-color: #f2f4f7;">Action</th>
      </tr>
    </thead>
    <tbody id="tbody">
      <tr>
        <th scope="row" style="width: 25px;">
          <input type="checkbox" data-productid="1882" value="">
        </th>
        <td style="width: 400px">
          <div class="row">
            <div class="col-3" style="font-size: 11px">
              <img style="width: 75px; height: 75px;" src="https://via.placeholder.com/75">
            </div>
            <div class="col-9" style="font-size: 11px">
              <span>Mamaway ANTIBAKTERI Anti Bocor Tahan Lama, Mengangkat Payudara , Bra Hamil & Menyusui
                                    Responsive</span> <br>
              <span style="background-color: #6020ff; color: white; font-size: 10px; padding: 2px 10px; border-radius: 30px; margin-left: 4px;">
                                    Mamaway
                                </span>
            </div>
          </div>
        </td>
        <td style="width: 800px" colspan="4" class="p-0">
          <table class="table table-borderless">
            <tbody>
              <tr style="border-bottom: 1px dashed red;">
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811P-S
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811P-S
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  Rp 700000
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  6
                </td>
              </tr>
              <tr style="border-bottom: 1px dashed red;">
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811P-M
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811P-M
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  Rp 700000
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  0
                </td>
              </tr>
              <tr style="border-bottom: 1px dashed red;">
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811P-L
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811P-L
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  Rp 700000
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  0
                </td>
              </tr>
              <tr style="border-bottom: 1px dashed red;">
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811P-XL
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811P-XL
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  Rp 700000
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  0
                </td>
              </tr>
              <tr style="border-bottom: 1px dashed red;">
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811P-2XL
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811P-2XL
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  Rp 700000
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  4
                </td>
              </tr>
              <tr style="">
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811D-S
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811D-S
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  Rp 700000
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  1
                </td>
              </tr>
              <tr style="">
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811D-M
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811D-M
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  Rp 700000
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  0
                </td>
              </tr>
              <tr style="">
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811D-L
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811D-L
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  Rp 700000
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  0
                </td>
              </tr>
              <tr style="">
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811D-XL
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  098811D-XL
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  Rp 700000
                </td>
                <td class="text-start" style="width: 150px; font-size: 11px">
                  0
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <a href="#" data-productid="1882" style="font-size: 12px; text-decoration: none;">Sync</a>
        </td>
      </tr>
    </tbody>
  </table>
</body>

内容的提问来源于stack exchange，提问作者Raymond Seger