Display division between columns in bootstrap table - html

Question

I set a bootstrap table to display a cryptocurrency ticker and I would like to display a line in between separating columns, using the border properties I guess, but I don't know exactly how to set the right side borders of the cells visible, so they form the vertical lines along rows.
<!-- 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

Can you check the below snippet and let me know if something like this is what you are expecting?
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>
Have added border-spacing: unset; property to table in order to avoid the space between rows.