如何在Bootstrap表格中设置列分割线用于加密货币行情展示

你当前使用了table-borderless类清除了表格所有默认边框，要实现列之间的贯穿垂直分隔线，可参考以下两种方案： #

方案1：使用Bootstrap内置工具类（无需额外CSS） #

Bootstrap 5自带border-end边框工具类，直接给除最后一列外的所有<th>添加该类即可快速实现右边框：

<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- HTML -->
<div className="table-responsive-l">
  <table className="table table-borderless fw-lighter table-xxl">
    <tbody>
      <tr className="fs-5 row-bottom-margin" id="currency_labels">
        <th className="border-end">BTC</th>
        <th className="border-end">ETH</th>
        <th className="border-end">XRP</th>
        <th className="border-end">BCH</th>
        <th className="border-end">EOS</th>
        <th>DOGE</th>
      </tr>
    </tbody>
    <tbody>
      <tr className="fs-5">
        <th className="border-end">$1.00</th>
        <th className="border-end">$2.00</th>
        <th className="border-end">$3.00</th>
        <th className="border-end">$4.00</th>
        <th className="border-end">$5.00</th>
        <th>$6.00</th>
      </tr>
    </tbody>
    <tbody>
      <tr className="fs-6">
        <th className="border-end">+0.1%</th>
        <th className="border-end">-0.2%</th>
        <th className="border-end">+0.3%</th>
        <th className="border-end">-0.4%</th>
        <th className="border-end">+0.5%</th>
        <th>-0.6%</th>
      </tr>
    </tbody>
  </table>
</div>

如果需要调整边框颜色，可以搭配边框颜色类使用，比如border-end border-end-secondary就能修改为灰色边框。 #

方案2：自定义CSS（灵活调整样式） #

如果列数较多不想逐个加类，或者需要自定义边框粗细、颜色，可以添加自定义CSS规则：

/* 给表格除最后一列外的所有th添加右边框 */
.crypto-table th:not(:last-child) {
  border-right: 1px solid #dee2e6; /* 可自行修改颜色、粗细参数 */
}

修改表格标签添加自定义类即可生效：

<table className="table table-borderless fw-lighter table-xxl crypto-table">

两种方案都依托Bootstrap表格默认的border-collapse: collapse特性，所有行的同列边框会自动对齐，形成贯穿整表的垂直分隔线。 #

内容的提问来源于stack exchange，提问作者Carlos D. Zapata