引导表中列之间的显示划分

Question

我设置了一个引导表以显示一个加密货币代码，我希望使用边框属性在分隔列之间显示一行，但我不知道如何设置可见的单元格的右侧边框，因此它们沿着行形成垂直线。

​

<!-- 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>BTC</th>
        <th>ETH</th>
        <th>XRP</th>
        <th>BCH</th>
        <th>EOS</th>
        <th>DOGE</th>
      </tr>
    </tbody>

    <tbody>
      <tr className="fs-5">
        <th>$1.00</th>
        <th>$2.00</th>
        <th>$3.00</th>
        <th>$4.00</th>
        <th>$5.00</th>
        <th>$6.00</th>
      </tr>
    </tbody>

    <tbody>
      <tr className="fs-6">
        <th>+0.1%</th>
        <th>-0.2%</th>
        <th>+0.3%</th>
        <th>-0.4%</th>
        <th>+0.5%</th>
        <th>-0.6%</th>
      </tr>
    </tbody>
  </table>
</div>

​

Answer 1

你能检查下面的片段并让我知道这是否是你所期望的吗？

​

th:not(:last-child) {
  border-right: 1px solid #444;
}

table {
  border-spacing: unset;
}

<div class="table-responsive-l">
            <table className="table table-borderless fw-lighter table-xxl">
                <tbody>
                    <tr className="fs-5 row-bottom-margin" id="currency_labels">
                        <th>BTC</th>
                        <th>ETH</th>
                        <th>XRP</th>
                        <th>BCH</th>
                        <th>EOS</th>
                        <th>DOGE</th>
                    </tr>
                </tbody>

                <tbody>
                    <tr className="fs-5">
                        <th>$1.00</th>
                        <th>$2.00</th>
                        <th>$3.00</th>
                        <th>$4.00</th>
                        <th>$5.00</th>
                        <th>$6.00</th>
                    </tr>
                </tbody>

                <tbody>
                    <tr className="fs-6">
                        <th>+0.1%</th>
                        <th>-0.2%</th>
                        <th>+0.3%</th>
                        <th>-0.4%</th>
                        <th>+0.5%</th>
                        <th>-0.6%</th>
                    </tr>
                </tbody>
            </table>
        </div>

​

将border-spacing: unset;属性添加到表中，以避免行之间的空格。