如何为Bootstrap表格仅添加列边框而非行边框？

你的问题根源在于Bootstrap自带的table-borderless样式与自定义边框规则冲突，加上tfoot单元格未设置边框、边框重叠导致首尾列视觉差异。以下是调整后的完整代码，可实现你要的预期效果：

完整代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    .custom-table {
      border-collapse: collapse;
      border: 1px solid #000;
      width: 100%;
    }

    .custom-table thead th {
      border: 1px solid #000;
      background: #E3ECFC;
    }

    .custom-table tbody td,
    .custom-table tfoot td {
      border-left: 1px solid #000;
      border-right: 1px solid #000;
      border-top: none;
      border-bottom: 1px solid #000;
    }

    .custom-table tbody tr:nth-child(odd) {
      background: #F8F8F8;
    }

    .custom-table tfoot tr:nth-child(odd) {
      background: #E3ECFC;
    }
  </style>
</head>
<body>
  <div class="container-fluid mt-3">
    <table class="custom-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Col1</th>
          <th>Col2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>name</td>
          <td>123</td>
          <td>456</td>
        </tr>
        <tr>
          <td>2</td>
          <td>name2</td>
          <td>xyz</td>
          <td>abc</td>
        </tr>
        <tr>
          <td>1</td>
          <td>name</td>
          <td>123</td>
          <td>456</td>
        </tr>
        <tr>
          <td>2</td>
          <td>name2</td>
          <td>xyz</td>
          <td>abc</td>
        </tr>
        <tr>
          <td>1</td>
          <td>name</td>
          <td>123</td>
          <td>456</td>
        </tr>
        <tr>
          <td>2</td>
          <td>name2</td>
          <td>xyz</td>
          <td>abc</td>
        </tr>
        <tr>
          <td>1</td>
          <td>name</td>
          <td>123</td>
          <td>456</td>
        </tr>
        <tr>
          <td>2</td>
          <td>name2</td>
          <td>xyz</td>
          <td>abc</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>4</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>5</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
      </tfoot>
    </table>
  </div>
</body>
</html>

关键修改说明 #

• 移除table-borderless类，改用自定义类custom-table，避免Bootstrap默认样式干扰，同时设置border-collapse: collapse解决边框重叠导致的粗细差异问题
• 统一表头、表体、表尾的边框规则：表头单元格设完整边框，表体和表尾单元格保留左右边框，同时添加底部边框，确保表格底部边框正常显示
• 保留原有的隔行变色样式，与预期效果一致
• 去掉不必要的!important，通过自定义类的优先级覆盖Bootstrap默认样式

内容的提问来源于stack exchange，提问作者vamsi sai