#### Basic Tables

#### Basic example

For basic styling—light padding and only horizontal dividers—add the base class `.table` to any `<table>`.

Name | Phone Number | Date of Birth | Active?
--- | --- | --- | ---
Risa D. Pearson | 336-508-2157 | July 24, 1950 |
Ann C. Thompson | 646-473-2057 | January 25, 1959 |
Paul J. Friend | 281-308-0793 | September 1, 1939 |
Linda G. Smith | 606-253-1207 | May 3, 1962 |

                                                            <table class="table table-centered mb-0">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Name</th>
                                                                        <th>Phone Number</th>
                                                                        <th>Date of Birth</th>
                                                                        <th>Active?</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>Risa D. Pearson</td>
                                                                        <td>336-508-2157</td>
                                                                        <td>July 24, 1950</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch1" checked data-switch="success"/>
                                                                                <label for="switch1" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Ann C. Thompson</td>
                                                                        <td>646-473-2057</td>
                                                                        <td>January 25, 1959</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch2" checked data-switch="success"/>
                                                                                <label for="switch2" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Paul J. Friend</td>
                                                                        <td>281-308-0793</td>
                                                                        <td>September 1, 1939</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch3" data-switch="success"/>
                                                                                <label for="switch3" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Linda G. Smith</td>
                                                                        <td>606-253-1207</td>
                                                                        <td>May 3, 1962</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch4" data-switch="success"/>
                                                                                <label for="switch4" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>

#### Inverse table

You can also invert the colors—with light text on dark backgrounds—with `.table-dark`.

Name | Phone Number | Date of Birth | Active?
--- | --- | --- | ---
Risa D. Pearson | 336-508-2157 | July 24, 1950 |
Ann C. Thompson | 646-473-2057 | January 25, 1959 |
Paul J. Friend | 281-308-0793 | September 1, 1939 |
Sean C. Nguyen | 269-714-6825 | February 5, 1994 |

                                                            <table class="table table-dark mb-0">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Name</th>
                                                                        <th>Phone Number</th>
                                                                        <th>Date of Birth</th>
                                                                        <th>Active?</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>Risa D. Pearson</td>
                                                                        <td>336-508-2157</td>
                                                                        <td>July 24, 1950</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch6" data-switch="success"/>
                                                                                <label for="switch6" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Ann C. Thompson</td>
                                                                        <td>646-473-2057</td>
                                                                        <td>January 25, 1959</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch7" checked data-switch="success"/>
                                                                                <label for="switch7" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Paul J. Friend</td>
                                                                        <td>281-308-0793</td>
                                                                        <td>September 1, 1939</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch8" data-switch="success"/>
                                                                                <label for="switch8" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Sean C. Nguyen</td>
                                                                        <td>269-714-6825</td>
                                                                        <td>February 5, 1994</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch10" checked data-switch="success"/>
                                                                                <label for="switch10" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>

#### Striped rows

Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.

User | Account No. | Balance | Action
--- | --- | --- | ---
Risa D. Pearson | AC336 508 2157 | July 24, 1950 |
Ann C. Thompson | SB646 473 2057 | January 25, 1959 |
Paul J. Friend | DL281 308 0793 | September 1, 1939 |
Sean C. Nguyen | CA269 714 6825 | February 5, 1994 |

                                                            <table class="table table-striped table-centered mb-0">
                                                                <thead>
                                                                    <tr>
                                                                        <th>User</th>
                                                                        <th>Account No.</th>
                                                                        <th>Balance</th>
                                                                        <th>Action</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td class="table-user">
                                                                            <img src="assets/images/users/avatar-2.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                            Risa D. Pearson
                                                                        </td>
                                                                        <td>AC336 508 2157</td>
                                                                        <td>July 24, 1950</td>
                                                                        <td class="table-action">
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="table-user">
                                                                            <img src="assets/images/users/avatar-3.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                            Ann C. Thompson
                                                                        </td>
                                                                        <td>SB646 473 2057</td>
                                                                        <td>January 25, 1959</td>
                                                                        <td class="table-action">
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="table-user">
                                                                            <img src="assets/images/users/avatar-4.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                            Paul J. Friend
                                                                        </td>
                                                                        <td>DL281 308 0793</td>
                                                                        <td>September 1, 1939</td>
                                                                        <td class="table-action">
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="table-user">
                                                                            <img src="assets/images/users/avatar-5.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                            Sean C. Nguyen
                                                                        </td>
                                                                        <td>CA269 714 6825</td>
                                                                        <td>February 5, 1994</td>
                                                                        <td class="table-action">
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-pencil"></i></a>
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>

#### Table head options

Use one of two modifier classes to make `<thead>`s appear light or dark gray.

Product | Courier | Process | Status
--- | --- | --- | ---
ASOS Ridley High Waist | FedEx |  | Delivered
Marco Lightweight Shirt | DHL |  | Shipped
Half Sleeve Shirt | Bright |  | Order Received
Lightweight Jacket | FedEx |  | Delivered

                                                            <table class="table table-centered mb-0">
                                                                <thead class="table-dark">
                                                                    <tr>
                                                                        <th>Product</th>
                                                                        <th>Courier</th>
                                                                        <th>Process</th>
                                                                        <th>Status</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>ASOS Ridley High Waist</td>
                                                                        <td>FedEx</td>
                                                                        <td>
                                                                            <div class="progress progress-sm">
                                                                                <div class="progress-bar progress-lg bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                                                            </div>
                                                                        </td>
                                                                        <td><i class="mdi mdi-circle text-success"></i> Delivered</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Marco Lightweight Shirt</td>
                                                                        <td>DHL</td>
                                                                        <td>
                                                                            <div class="progress progress-sm">
                                                                                <div class="progress-bar progress-lg bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                                                            </div>
                                                                        </td>
                                                                        <td><i class="mdi mdi-circle text-warning"></i> Shipped</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Half Sleeve Shirt</td>
                                                                        <td>Bright</td>
                                                                        <td>
                                                                            <div class="progress progress-sm">
                                                                                <div class="progress-bar progress-lg bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                                                            </div>
                                                                        </td>
                                                                        <td><i class="mdi mdi-circle text-info"></i> Order Received</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Lightweight Jacket</td>
                                                                        <td>FedEx</td>
                                                                        <td>
                                                                            <div class="progress progress-sm">
                                                                                <div class="progress-bar progress-lg bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                                                            </div>
                                                                        </td>
                                                                        <td><i class="mdi mdi-circle text-success"></i> Delivered</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>

#### Hoverable rows

Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.

Product | Price | Quantity | Amount
--- | --- | --- | ---
ASOS Ridley High Waist | $79.49 | 82 Pcs | $6,518.18
Marco Lightweight Shirt | $128.50 | 37 Pcs | $4,754.50
Half Sleeve Shirt | $39.99 | 64 Pcs | $2,559.36
Lightweight Jacket | $20.00 | 184 Pcs | $3,680.00

                                                            <table class="table table-hover table-centered mb-0">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Product</th>
                                                                        <th>Price</th>
                                                                        <th>Quantity</th>
                                                                        <th>Amount</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>ASOS Ridley High Waist</td>
                                                                        <td>$79.49</td>
                                                                        <td><span class="badge bg-primary">82 Pcs</span></td>
                                                                        <td>$6,518.18</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Marco Lightweight Shirt</td>
                                                                        <td>$128.50</td>
                                                                        <td><span class="badge bg-primary">37 Pcs</span></td>
                                                                        <td>$4,754.50</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Half Sleeve Shirt</td>
                                                                        <td>$39.99</td>
                                                                        <td><span class="badge bg-primary">64 Pcs</span></td>
                                                                        <td>$2,559.36</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Lightweight Jacket</td>
                                                                        <td>$20.00</td>
                                                                        <td><span class="badge bg-primary">184 Pcs</span></td>
                                                                        <td>$3,680.00</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>

#### Small table

Add `.table-sm` to make tables more compact by cutting cell padding in half.

Product | Price | Quantity | Amount
--- | --- | --- | ---
ASOS Ridley High Waist | $79.49 | 82 Pcs | $6,518.18
Marco Lightweight Shirt | $128.50 | 37 Pcs | $4,754.50
Half Sleeve Shirt | $39.99 | 64 Pcs | $2,559.36
Lightweight Jacket | $20.00 | 184 Pcs | $3,680.00
Marco Shoes | $28.49 | 69 Pcs | $1,965.81
ASOS Ridley High Waist | $79.49 | 82 Pcs | $6,518.18

                                                            <table class="table table-sm table-centered mb-0">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Product</th>
                                                                        <th>Price</th>
                                                                        <th>Quantity</th>
                                                                        <th>Amount</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>ASOS Ridley High Waist</td>
                                                                        <td>$79.49</td>
                                                                        <td><span class="badge bg-primary">82 Pcs</span></td>
                                                                        <td>$6,518.18</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Marco Lightweight Shirt</td>
                                                                        <td>$128.50</td>
                                                                        <td><span class="badge bg-primary">37 Pcs</span></td>
                                                                        <td>$4,754.50</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Half Sleeve Shirt</td>
                                                                        <td>$39.99</td>
                                                                        <td><span class="badge bg-primary">64 Pcs</span></td>
                                                                        <td>$2,559.36</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Lightweight Jacket</td>
                                                                        <td>$20.00</td>
                                                                        <td><span class="badge bg-primary">184 Pcs</span></td>
                                                                        <td>$3,680.00</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Marco Shoes</td>
                                                                        <td>$28.49</td>
                                                                        <td><span class="badge bg-primary">69 Pcs</span></td>
                                                                        <td>$1,965.81</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>ASOS Ridley High Waist</td>
                                                                        <td>$79.49</td>
                                                                        <td><span class="badge bg-primary">82 Pcs</span></td>
                                                                        <td>$6,518.18</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>

#### Bordered table

Add `.table-bordered` for borders on all sides of the table and cells.

User | Account No. | Balance | Action
--- | --- | --- | ---
Risa D. Pearson | AC336 508 2157 | July 24, 1950 |
Ann C. Thompson | SB646 473 2057 | January 25, 1959 |
Paul J. Friend | DL281 308 0793 | September 1, 1939 |
Sean C. Nguyen | CA269 714 6825 | February 5, 1994 |

                                                            <table class="table table-bordered table-centered mb-0">
                                                                <thead>
                                                                    <tr>
                                                                        <th>User</th>
                                                                        <th>Account No.</th>
                                                                        <th>Balance</th>
                                                                        <th class="text-center">Action</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td class="table-user">
                                                                            <img src="assets/images/users/avatar-6.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                            Risa D. Pearson
                                                                        </td>
                                                                        <td>AC336 508 2157</td>
                                                                        <td>July 24, 1950</td>
                                                                        <td class="table-action text-center">
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="table-user">
                                                                            <img src="assets/images/users/avatar-7.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                            Ann C. Thompson
                                                                        </td>
                                                                        <td>SB646 473 2057</td>
                                                                        <td>January 25, 1959</td>
                                                                        <td class="table-action text-center">
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="table-user">
                                                                            <img src="assets/images/users/avatar-8.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                            Paul J. Friend
                                                                        </td>
                                                                        <td>DL281 308 0793</td>
                                                                        <td>September 1, 1939</td>
                                                                        <td class="table-action text-center">
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="table-user">
                                                                            <img src="assets/images/users/avatar-9.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                            Sean C. Nguyen
                                                                        </td>
                                                                        <td>CA269 714 6825</td>
                                                                        <td>February 5, 1994</td>
                                                                        <td class="table-action text-center">
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>

#### Bordered color table

Add `.table-bordered` & `.border-primary` can be added to change colors.

User | Account No. | Balance | Action
--- | --- | --- | ---
Risa D. Pearson | AC336 508 2157 | July 24, 1950 |
Ann C. Thompson | SB646 473 2057 | January 25, 1959 |
Paul J. Friend | DL281 308 0793 | September 1, 1939 |
Sean C. Nguyen | CA269 714 6825 | February 5, 1994 |

                                                            <table class="table table-bordered border-primary table-centered mb-0">
                                                                <thead>
                                                                    <tr>
                                                                        <th>User</th>
                                                                        <th>Account No.</th>
                                                                        <th>Balance</th>
                                                                        <th class="text-center">Action</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td class="table-user">
                                                                            <img src="assets/images/users/avatar-6.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                            Risa D. Pearson
                                                                        </td>
                                                                        <td>AC336 508 2157</td>
                                                                        <td>July 24, 1950</td>
                                                                        <td class="table-action text-center">
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="table-user">
                                                                            <img src="assets/images/users/avatar-7.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                            Ann C. Thompson
                                                                        </td>
                                                                        <td>SB646 473 2057</td>
                                                                        <td>January 25, 1959</td>
                                                                        <td class="table-action text-center">
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="table-user">
                                                                            <img src="assets/images/users/avatar-8.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                            Paul J. Friend
                                                                        </td>
                                                                        <td>DL281 308 0793</td>
                                                                        <td>September 1, 1939</td>
                                                                        <td class="table-action text-center">
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="table-user">
                                                                            <img src="assets/images/users/avatar-9.jpg" alt="table-user" class="me-2 rounded-circle" />
                                                                            Sean C. Nguyen
                                                                        </td>
                                                                        <td>CA269 714 6825</td>
                                                                        <td>February 5, 1994</td>
                                                                        <td class="table-action text-center">
                                                                            <a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>

#### Always responsive

Across every breakpoint, use `.table-responsive` for horizontally scrolling tables. Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell

                                                            <table class="table mb-0">
                                                                <thead>
                                                                    <tr>
                                                                        <th scope="col">#</th>
                                                                        <th scope="col">Heading</th>
                                                                        <th scope="col">Heading</th>
                                                                        <th scope="col">Heading</th>
                                                                        <th scope="col">Heading</th>
                                                                        <th scope="col">Heading</th>
                                                                        <th scope="col">Heading</th>
                                                                        <th scope="col">Heading</th>
                                                                        <th scope="col">Heading</th>
                                                                        <th scope="col">Heading</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <th scope="row">1</th>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th scope="row">2</th>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th scope="row">3</th>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                        <td>Cell</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>

#### Basic Borderless Example

Add `.table-borderless` for a table without borders.

Name | Phone Number | Date of Birth | Active?
--- | --- | --- | ---
Risa D. Pearson | 336-508-2157 | July 24, 1950 |
Ann C. Thompson | 646-473-2057 | January 25, 1959 |
Paul J. Friend | 281-308-0793 | September 1, 1939 |
Linda G. Smith | 606-253-1207 | May 3, 1962 |

                                                            <table class="table table-centered table-borderless mb-0">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Name</th>
                                                                        <th>Phone Number</th>
                                                                        <th>Date of Birth</th>
                                                                        <th>Active?</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>Risa D. Pearson</td>
                                                                        <td>336-508-2157</td>
                                                                        <td>July 24, 1950</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch21" checked data-switch="success"/>
                                                                                <label for="switch21" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Ann C. Thompson</td>
                                                                        <td>646-473-2057</td>
                                                                        <td>January 25, 1959</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch22" checked data-switch="success"/>
                                                                                <label for="switch22" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Paul J. Friend</td>
                                                                        <td>281-308-0793</td>
                                                                        <td>September 1, 1939</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch23" data-switch="success"/>
                                                                                <label for="switch23" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Linda G. Smith</td>
                                                                        <td>606-253-1207</td>
                                                                        <td>May 3, 1962</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch24" data-switch="success"/>
                                                                                <label for="switch24" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>

#### Inverse Borderless table

Add `.table-borderless` for a table without borders.

Name | Phone Number | Date of Birth | Active?
--- | --- | --- | ---
Risa D. Pearson | 336-508-2157 | July 24, 1950 |
Ann C. Thompson | 646-473-2057 | January 25, 1959 |
Paul J. Friend | 281-308-0793 | September 1, 1939 |
Sean C. Nguyen | 269-714-6825 | February 5, 1994 |

                                                            <table class="table table-dark table-borderless mb-0">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Name</th>
                                                                        <th>Phone Number</th>
                                                                        <th>Date of Birth</th>
                                                                        <th>Active?</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>Risa D. Pearson</td>
                                                                        <td>336-508-2157</td>
                                                                        <td>July 24, 1950</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch25" data-switch="success"/>
                                                                                <label for="switch25" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Ann C. Thompson</td>
                                                                        <td>646-473-2057</td>
                                                                        <td>January 25, 1959</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch26" checked data-switch="success"/>
                                                                                <label for="switch26" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Paul J. Friend</td>
                                                                        <td>281-308-0793</td>
                                                                        <td>September 1, 1939</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch27" data-switch="success"/>
                                                                                <label for="switch27" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Sean C. Nguyen</td>
                                                                        <td>269-714-6825</td>
                                                                        <td>February 5, 1994</td>
                                                                        <td>
                                                                            <!-- Switch-->
                                                                            <div>
                                                                                <input type="checkbox" id="switch28" checked data-switch="success"/>
                                                                                <label for="switch28" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>

#### Active tables

Highlight a table row or cell by adding a `.table-active` class.

Name | Phone Number | Date of Birth | Active?
--- | --- | --- | ---
Risa D. Pearson | 336-508-2157 | July 24, 1950 |
Ann C. Thompson | 646-473-2057 | January 25, 1959 |
Paul J. Friend | 281-308-0793 | September 1, 1939 |
Linda G. Smith | 606-253-1207 |
Paul J. Friend | 281-308-0793 | September 1, 1939 |

                                                                <table class="table mb-0">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>Name</th>
                                                                            <th>Phone Number</th>
                                                                            <th>Date of Birth</th>
                                                                            <th>Active?</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        <tr class="table-active">
                                                                            <td>Risa D. Pearson</td>
                                                                            <td>336-508-2157</td>
                                                                            <td>July 24, 1950</td>
                                                                            <td>
                                                                                <!-- Switch-->
                                                                                <div>
                                                                                    <input type="checkbox" id="switch29" checked data-switch="success" />
                                                                                    <label for="switch29" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Ann C. Thompson</td>
                                                                            <td>646-473-2057</td>
                                                                            <td>January 25, 1959</td>
                                                                            <td>
                                                                                <!-- Switch-->
                                                                                <div>
                                                                                    <input type="checkbox" id="switch30" checked data-switch="success" />
                                                                                    <label for="switch30" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Paul J. Friend</td>
                                                                            <td>281-308-0793</td>
                                                                            <td>September 1, 1939</td>
                                                                            <td>
                                                                                <!-- Switch-->
                                                                                <div>
                                                                                    <input type="checkbox" id="switch31" data-switch="success" />
                                                                                    <label for="switch31" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td scope="row">Linda G. Smith</td>
                                                                            <td colspan="2" class="table-active">606-253-1207</td>
                                                                            <td>
                                                                                <!-- Switch-->
                                                                                <div>
                                                                                    <input type="checkbox" id="switch32" data-switch="success" />
                                                                                    <label for="switch32" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Paul J. Friend</td>
                                                                            <td>281-308-0793</td>
                                                                            <td>September 1, 1939</td>
                                                                            <td>
                                                                                <!-- Switch-->
                                                                                <div>
                                                                                    <input type="checkbox" id="switch33" checked data-switch="success" />
                                                                                    <label for="switch33" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>

#### Nesting

Border styles, active styles, and table variants are not inherited by nested tables.

Name | Phone Number | Date of Birth | Active?
--- | --- | --- | ---
Risa D. Pearson | 336-508-2157 | July 24, 1950 |
Name | Phone Number | Date of Birth | Active?
--- | --- | --- | ---
Risa D. Pearson | 336-508-2157 | July 24, 1950 |
Ann C. Thompson | 646-473-2057 | January 25, 1959 |
Linda G. Smith | 606-253-1207 | September 2, 1939 |

                                                                <table class="table table-striped mb-0">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>Name</th>
                                                                            <th>Phone Number</th>
                                                                            <th>Date of Birth</th>
                                                                            <th>Active?</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        <tr>
                                                                            <td>Risa D. Pearson</td>
                                                                            <td>336-508-2157</td>
                                                                            <td>July 24, 1950</td>
                                                                            <td>
                                                                                <!-- Switch-->
                                                                                <div>
                                                                                    <input type="checkbox" id="switch34" checked data-switch="success" />
                                                                                    <label for="switch34" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td colspan="4">
                                                                                <table class="table mb-0">
                                                                                    <thead>
                                                                                        <tr>
                                                                                            <th>Name</th>
                                                                                            <th>Phone Number</th>
                                                                                            <th>Date of Birth</th>
                                                                                            <th>Active?</th>
                                                                                        </tr>
                                                                                    </thead>
                                                                                    <tbody>
                                                                                        <tr>
                                                                                            <td>Risa D. Pearson</td>
                                                                                            <td>336-508-2157</td>
                                                                                            <td>July 24, 1950</td>
                                                                                            <td>
                                                                                                <!-- Switch-->
                                                                                                <div>
                                                                                                    <input type="checkbox" id="switch35" checked data-switch="success" />
                                                                                                    <label for="switch35" data-on-label="Yes" data-off-label="No"
                                                                                                        class="mb-0 d-block"></label>
                                                                                                </div>
                                                                                            </td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                            <td>Ann C. Thompson</td>
                                                                                            <td>646-473-2057</td>
                                                                                            <td>January 25, 1959</td>
                                                                                            <td>
                                                                                                <!-- Switch-->
                                                                                                <div>
                                                                                                    <input type="checkbox" id="switch36" data-switch="success" />
                                                                                                    <label for="switch36" data-on-label="Yes" data-off-label="No"
                                                                                                        class="mb-0 d-block"></label>
                                                                                                </div>
                                                                                            </td>
                                                                                        </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>Linda G. Smith</td>
                                                                            <td>606-253-1207</td>
                                                                            <td>September 2, 1939</td>
                                                                            <td>
                                                                                <!-- Switch-->
                                                                                <div>
                                                                                    <input type="checkbox" id="switch37" data-switch="success" />
                                                                                    <label for="switch37" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>

##### Settings

Customize the overall color scheme, sidebar menu, etc.

##### Color Scheme

Light Mode
Dark Mode

##### Width

Fluid
Boxed

##### Left Sidebar

Default
Light
Dark
Fixed
Condensed
Scrollable
Purchase Now