Bootstrap Tables

HTML tables look incredibly plain and unappealing by default. Bootstrap 5 fixes this completely by providing a series of .table modifier classes that instantly add spacing, borders, and hover effects to your data.

---

1. Basic Table

To start styling any table, all you need is the base .table class. This immediately adds light padding and horizontal divider lines.

<div class="table-responsive">
    <table class="table">
        <!-- Table Content -->
    </table>
</div>

---

2. Striped Rows

Add the .table-striped class to give your table a "zebra-stripe" effect. This automatically darkens every alternating row, making dense data significantly easier to read across the screen.

<!-- Basic + Striped classes -->
<table class="table table-striped">...</table>

---

3. Bordered & Borderless Tables

By default, Boostrap tables only have horizontal lines. You can modify this using two classes:

• .table-bordered: Adds borders on all sides of the table and internal cells.
• .table-borderless: Removes all borders completely for a super clean, minimalist look.

• .table-bordered
• .table-borderless

<!-- Fully Outline the grid -->
<table class="table table-bordered">...</table>

<!-- Remove all lines -->
<table class="table table-borderless">...</table>

---

4. Hoverable Rows

Add the .table-hover class to enable a hover effect on table rows. When a user moves their mouse vertically across the table, the row underneath their cursor will slightly darken. This makes tracking horizontal data on wide screens incredibly easy.

<table class="table table-hover">...</table>

---

5. Small (Condensed) Tables

If you have an enormous amount of data and want to fit more rows onto the screen, add the .table-sm class. This cuts cell padding in half, creating a visibly denser, tighter table.

<table class="table table-sm table-bordered">...</table>