Carlos D. Zapata
Carlos D. Zapata

Reputation: 139

Display division between columns in bootstrap table

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/[email protected]/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>

Upvotes: 0

Views: 641

Answers (1)

Abin Thaha
Abin Thaha

Reputation: 4633

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.

Upvotes: 1

Related Questions