Tables

Basic Tables
Name Created On Number Status
Mark 21,Dec 2021 +1234-12340 Completed
Monika 29,April 2022 +1523-12459 Failed
Madina 30,Nov 2022 +1982-16234 Successful
Bhamako 18,Mar 2022 +1526-10729 Pending 
<div class="table-responsive">
    <table class="table text-nowrap">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Created On</th>
                <th scope="col">Number</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Mark</th>
                <td>21,Dec 2021</td>
                <td>+1234-12340</td>
                <td><span class="badge bg-outline-primary">Completed</span></td>
            </tr>
            <tr>
                <th scope="row">Monika</th>
                <td>29,April 2022</td>
                <td>+1523-12459</td>
                <td><span class="badge bg-outline-warning">Failed</span></td>
            </tr>
            <tr>
                <th scope="row">Madina</th>
                <td>30,Nov 2022</td>
                <td>+1982-16234</td>
                <td><span class="badge bg-outline-success">Successful</span></td>
            </tr>
            <tr>
                <th scope="row">Bhamako</th>
                <td>18,Mar 2022</td>
                <td>+1526-10729</td>
                <td><span class="badge bg-outline-secondary">Pending</span></td>
            </tr>
        </tbody>
    </table>
</div>
Bordered Tables
User Status Email Action
img Sukuro Kim
Active kimosukuro@gmail.com
img Hasimna
Inactive hasimna2132@gmail.com
img Azimo Khan
Active azimokhan421@gmail.com
img Samantha Julia
Active julianasams143@gmail.com 
<div class="table-responsive">
    <table class="table text-nowrap table-bordered">
        <thead>
            <tr>
                <th scope="col">User</th>
                <th scope="col">Status</th>
                <th scope="col">Email</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/13.jpg" alt="img">
                        </span>Sukuro Kim
                    </div>
                </th>
                <td><span class="badge bg-success-transparent">Active</span></td>
                <td>kimosukuro@gmail.com</td>
                <td>
                    <div class="hstack gap-2 flex-wrap">
                        <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 offline avatar-rounded">
                            <img src="../assets/images/faces/6.jpg" alt="img">
                        </span>Hasimna
                    </div>
                </th>
                <td><span class="badge bg-light text-dark">Inactive</span></td>
                <td>hasimna2132@gmail.com</td>
                <td>
                    <div class="hstack gap-2 flex-wrap">
                        <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/15.jpg" alt="img">
                        </span>Azimo Khan
                    </div>
                </th>
                <td><span class="badge bg-success-transparent">Active</span></td>
                <td>azimokhan421@gmail.com</td>
                <td>
                    <div class="hstack gap-2 flex-wrap">
                        <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/5.jpg" alt="img">
                        </span>Samantha Julia
                    </div>
                </th>
                <td><span class="badge bg-success-transparent">Active</span></td>
                <td>julianasams143@gmail.com</td>
                <td>
                    <div class="hstack gap-2 flex-wrap">
                        <a href="javascript:void(0);" class="text-info fs-14 lh-1"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);" class="text-danger fs-14 lh-1"><i
                                class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
Bordered Primary
Order Date Customer Action
#0007 26-04-2022
img Mayor Kelly
Booked
#0008 15-02-2022
img Wicky Kross
Booked
#0009 23-05-2022
img Julia Cam
Booked 
<div class="table-responsive">
    <table class="table text-nowrap table-bordered border-primary">
        <thead>
            <tr>
                <th scope="col">Order</th>
                <th scope="col">Date</th>
                <th scope="col">Customer</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    #0007
                </th>
                <td>
                    <span class="badge bg-light text-dark">26-04-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/3.jpg" alt="img">
                        </span>Mayor Kelly
                    </div>
                </td>
                <td><span class="badge bg-primary-transparent">Booked</span></td>
            </tr>
            <tr>
                <th scope="row">
                    #0008
                </th>
                <td>
                    <span class="badge bg-light text-dark">15-02-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/6.jpg" alt="img">
                        </span>Wicky Kross
                    </div>
                </td>
                <td><span class="badge bg-primary-transparent">Booked</span></td>
            </tr>
            <tr>
                <th scope="row">
                    #0009
                </th>
                <td>
                    <span class="badge bg-light text-dark">23-05-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/1.jpg" alt="img">
                        </span>Julia Cam
                    </div>
                </td>
                <td><span class="badge bg-primary-transparent">Booked</span></td>
            </tr>

        </tbody>
    </table>
</div>
Bordered Success
Order Date Customer Status
#0011 07-01-2022
img Helsenky
Delivered
#0012 18-05-2022
img Brodus
Delivered
#0013 19-03-2022
img Chikka Alen
Delivered 
<div class="table-responsive">
    <table class="table text-nowrap table-bordered border-success">
        <thead>
            <tr>
                <th scope="col">Order</th>
                <th scope="col">Date</th>
                <th scope="col">Customer</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    #0011
                </th>
                <td>
                    <span class="badge bg-light text-dark">07-01-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/10.jpg" alt="img">
                        </span>Helsenky
                    </div>
                </td>
                <td><span class="badge bg-success-transparent">Delivered</span></td>
            </tr>
            <tr>
                <th scope="row">
                    #0012
                </th>
                <td>
                    <span class="badge bg-light text-dark">18-05-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/14.jpg" alt="img">
                        </span>Brodus
                    </div>
                </td>
                <td><span class="badge bg-success-transparent">Delivered</span></td>
            </tr>
            <tr>
                <th scope="row">
                    #0013
                </th>
                <td>
                    <span class="badge bg-light text-dark">19-03-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/12.jpg" alt="img">
                        </span>Chikka Alen
                    </div>
                </td>
                <td><span class="badge bg-success-transparent">Delivered</span></td>
            </tr>
        </tbody>
    </table>
</div>
Bordered warning
Order Date Customer Action
#0014 21-02-2022
img Sukuro Kim
Accepted
#0018 26-03-2022
img Alex Carey
Accepted
#0020 14-03-2022
img Pamila Anderson
Accepted 
<div class="table-responsive">
    <table class="table text-nowrap table-bordered border-warning">
        <thead>
            <tr>
                <th scope="col">Order</th>
                <th scope="col">Date</th>
                <th scope="col">Customer</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    #0014
                </th>
                <td>
                    <span class="badge bg-light text-dark">21-02-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/13.jpg" alt="img">
                        </span>Sukuro Kim
                    </div>
                </td>
                <td><span class="badge bg-warning-transparent">Accepted</span></td>
            </tr>
            <tr>
                <th scope="row">
                    #0018
                </th>
                <td>
                    <span class="badge bg-light text-dark">26-03-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/11.jpg" alt="img">
                        </span>Alex Carey
                    </div>
                </td>
                <td><span class="badge bg-warning-transparent">Accepted</span></td>
            </tr>
            <tr>
                <th scope="row">
                    #0020
                </th>
                <td>
                    <span class="badge bg-light text-dark">14-03-2022</span>
                </td>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/2.jpg" alt="img">
                        </span>Pamila Anderson
                    </div>
                </td>
                <td><span class="badge bg-warning-transparent">Accepted</span></td>
            </tr>
        </tbody>
    </table>
</div>
Table Without Borders
User Name Transaction Id Created Status
Harshrath #5182-3467 24 May 2022 Fixed
Zozo Hadid #5182-3412 02 July 2022 In Progress
Martiana #5182-3423 15 April 2022 Completed
Alex Carey #5182-3456 17 March 2022 Pending 
<div class="table-responsive">
    <table class="table text-nowrap table-borderless">
        <thead>
            <tr>
                <th scope="col">User Name</th>
                <th scope="col">Transaction Id</th>
                <th scope="col">Created</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Harshrath</th>
                <td>#5182-3467</td>
                <td>24 May 2022</td>
                <td><span class="badge bg-primary">Fixed</span></td>
            </tr>
            <tr>
                <th scope="row">Zozo Hadid</th>
                <td>#5182-3412</td>
                <td>02 July 2022</td>
                <td><span class="badge bg-warning">In Progress</span></td>
            </tr>
            <tr>
                <th scope="row">Martiana</th>
                <td>#5182-3423</td>
                <td>15 April 2022</td>
                <td><span class="badge bg-success">Completed</span></td>
            </tr>
            <tr>
                <th scope="row">Alex Carey</th>
                <td>#5182-3456</td>
                <td>17 March 2022</td>
                <td><span class="badge bg-danger">Pending</span></td>
            </tr>
        </tbody>
    </table>
</div>
Table Group Divideres
Product Seller Sale Percentage Quantity Sold
Smart Watch Slowtrack.inc 24.23% 250/1786
White Sneakers American & Co.inc 12.45% 123/985
Baseball Bat Sports Company 06.64% 124/232
Black Hoodie Renonds Fabrics 14.42% 192/2456 
<div class="table-responsive">
    <table class="table text-nowrap">
        <thead>
            <tr>
                <th scope="col">Product</th>
                <th scope="col">Seller</th>
                <th scope="col">Sale Percentage</th>
                <th scope="col">Quantity Sold</th>
            </tr>
        </thead>
        <tbody class="table-group-divider">
            <tr>
                <th scope="row">Smart Watch</th>
                <td>Slowtrack.inc</td>
                <td><a href="javascript:void(0);" class="text-success">24.23%<i
                            class="ri-arrow-up-fill ms-1"></i></a></td>
                <td>250/1786</td>
            </tr>
            <tr>
                <th scope="row">White Sneakers</th>
                <td>American & Co.inc</td>
                <td><a href="javascript:void(0);" class="text-danger">12.45%<i
                            class="ri-arrow-down-fill ms-1"></i></a></td>
                <td>123/985</td>
            </tr>
            <tr>
                <th scope="row">Baseball Bat</th>
                <td>Sports Company</td>
                <td><a href="javascript:void(0);" class="text-success">06.64%<i
                            class="ri-arrow-up-fill ms-1"></i></a></td>
                <td>124/232</td>
            </tr>
            <tr>
                <th scope="row">Black Hoodie</th>
                <td>Renonds Fabrics</td>
                <td><a href="javascript:void(0);" class="text-success">14.42%<i
                            class="ri-arrow-up-fill ms-1"></i></a></td>
                <td>192/2456</td>
            </tr>
        </tbody>
    </table>
</div>
Striped rows
ID Date Customer Action
2022R-01 27-010-2022 Moracco
2022R-02 28-10-2022 Thornton
2022R-03 22-10-2022 Larry Bird
2022R-04 29-09-2022 Erica Sean 
<div class="table-responsive">
    <table class="table text-nowrap table-striped">
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Date</th>
                <th scope="col">Customer</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">2022R-01</th>
                <td>27-010-2022</td>
                <td>Moracco</td>
                <td>
                    <button class="btn btn-sm btn-success btn-wave">
                        <i class="ri-download-2-line align-middle me-2 d-inline-block"></i>Download
                    </button>
                </td>
            </tr>
            <tr>
                <th scope="row">2022R-02</th>
                <td>28-10-2022</td>
                <td>Thornton</td>
                <td>
                    <button class="btn btn-sm btn-success btn-wave">
                        <i class="ri-download-2-line align-middle me-2 d-inline-block"></i>Download
                    </button>
                </td>
            </tr>
            <tr>
                <th scope="row">2022R-03</th>
                <td>22-10-2022</td>
                <td>Larry Bird</td>
                <td>
                    <button class="btn btn-sm btn-success btn-wave">
                        <i class="ri-download-2-line align-middle me-2 d-inline-block"></i>Download
                    </button>
                </td>
            </tr>
            <tr>
                <th scope="row">2022R-04</th>
                <td>29-09-2022</td>
                <td>Erica Sean</td>
                <td>
                    <button class="btn btn-sm btn-success btn-wave">
                        <i class="ri-download-2-line align-middle me-2 d-inline-block"></i>Download
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
Striped columns
ID Date Customer Action
2022R-01 27-010-2022 Moracco
2022R-02 28-10-2022 Thornton
2022R-03 22-10-2022 Larry Bird
2022R-04 29-09-2022 Erica Sean 
<div class="table-responsive">
    <table class="table text-nowrap table-striped-columns">
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Date</th>
                <th scope="col">Customer</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">2022R-01</th>
                <td>27-010-2022</td>
                <td>Moracco</td>
                <td>
                    <button class="btn btn-sm btn-danger btn-wave">
                        <i class="ri-delete-bin-line align-middle me-2 d-inline-block"></i>Delete
                    </button>
                </td>
            </tr>
            <tr>
                <th scope="row">2022R-02</th>
                <td>28-10-2022</td>
                <td>Thornton</td>
                <td>
                    <button class="btn btn-sm btn-danger btn-wave">
                        <i class="ri-delete-bin-line align-middle me-2 d-inline-block"></i>Delete
                    </button>
                </td>
            </tr>
            <tr>
                <th scope="row">2022R-03</th>
                <td>22-10-2022</td>
                <td>Larry Bird</td>
                <td>
                    <button class="btn btn-sm btn-danger btn-wave">
                        <i class="ri-delete-bin-line align-middle me-2 d-inline-block"></i>Delete
                    </button>
                </td>
            </tr>
            <tr>
                <th scope="row">2022R-04</th>
                <td>29-09-2022</td>
                <td>Erica Sean</td>
                <td>
                    <button class="btn btn-sm btn-danger btn-wave">
                        <i class="ri-delete-bin-line align-middle me-2 d-inline-block"></i>Delete
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
Primary Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton @twitter 
<div class="table-responsive">
    <table class="table text-nowrap table-primary">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry the Bird</td>
                <td>Thornton</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>
Secondary Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton @twitter 
<div class="table-responsive">
    <table class="table text-nowrap table-secondary">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry the Bird</td>
                <td>Thornton</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>
Warning Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton @twitter 
<div class="table-responsive">
    <table class="table text-nowrap table-warning">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry the Bird</td>
                <td>Thornton</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>
Danger Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton @twitter 
<div class="table-responsive">
    <table class="table text-nowrap table-danger">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry the Bird</td>
                <td>Thornton</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>
Dark Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton @twitter 
<div class="table-responsive">
    <table class="table text-nowrap table-dark">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry the Bird</td>
                <td>Thornton</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>
Success Table With Striped Rows
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Thornton @twitter 
<div class="table-responsive">
    <table class="table text-nowrap table-success table-striped">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry the Bird</td>
                <td>Thornton</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>
Hoverable Rows
Product Manager Category Team Status
img
Joanna Smith
joannasmith14@gmail.com
Fashion
img img img +5
img
Kara Kova
milesakara@gmail.com
Clothing
img img +6
img
Donald Trimb
donaldo21@gmail.com
Electronics
img img img +2
img
Justin Gaethje
justingae@gmail.com
Sports
img img +5 
<div class="table-responsive">
    <table class="table text-nowrap table-hover">
        <thead>
            <tr>
                <th scope="col">Product Manager</th>
                <th scope="col">Category</th>
                <th scope="col">Team</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/10.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Joanna Smith</span>
                            </div>
                            <div class="lh-1">
                                <span
                                    class="fs-11 text-muted">joannasmith14@gmail.com</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-primary-transparent">Fashion</span></td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/2.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/8.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/2.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded"
                            href="javascript:void(0);">
                            +5
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar"
                            style="width: 52%" aria-valuenow="52" aria-valuemin="0"
                            aria-valuemax="100">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/2.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Kara Kova</span>
                            </div>
                            <div class="lh-1">
                                <span
                                    class="fs-11 text-muted">milesakara@gmail.com</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-warning-transparent">Clothing</span></td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/4.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/6.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded"
                            href="javascript:void(0);">
                            +6
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar"
                            style="width: 40%" aria-valuenow="40" aria-valuemin="0"
                            aria-valuemax="100">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/16.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Donald Trimb</span>
                            </div>
                            <div class="lh-1">
                                <span
                                    class="fs-11 text-muted">donaldo21@gmail.com</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-dark-transparent">Electronics</span></td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/1.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/11.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/15.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded"
                            href="javascript:void(0);">
                            +2
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar"
                            style="width: 17%" aria-valuenow="17" aria-valuemin="0"
                            aria-valuemax="100">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/13.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Justin Gaethje</span>
                            </div>
                            <div class="lh-1">
                                <span
                                    class="fs-11 text-muted">justingae@gmail.com</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-danger-transparent">Sports</span></td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/4.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/6.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded"
                            href="javascript:void(0);">
                            +5
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar"
                            style="width: 72%" aria-valuenow="72" aria-valuemin="0"
                            aria-valuemax="100">
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
Hoverable rows With striped rows
Invoice Customer Status Date
IN-2032
img
Mark Cruise
markcruise24@gmail.com
Paid Jul 26,2022
IN-2022
img
Charanjeep
charanjeep@gmail.in
Paid Mar 14,2022
IN-2014
img
Samantha Julie
julie453@gmail.com
Cancelled Feb 1,2022
IN-2036
img
Simon Cohen
simon@gmail.com
Refunded Apr 24,2022 
<div class="table-responsive">
    <table class="table text-nowrap table-striped table-hover">
        <thead>
            <tr>
                <th scope="col">Invoice</th>
                <th scope="col">Customer</th>
                <th scope="col">Status</th>
                <th scope="col">Date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">IN-2032</th>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/15.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Mark Cruise</span>
                            </div>
                            <div class="lh-1">
                                <span
                                    class="fs-11 text-muted">markcruise24@gmail.com</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-success-transparent"><i
                            class="ri-check-fill align-middle me-1"></i>Paid</span></td>
                <td>Jul 26,2022</td>
            </tr>
            <tr>
                <th scope="row">IN-2022</th>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/12.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Charanjeep</span>
                            </div>
                            <div class="lh-1">
                                <span
                                    class="fs-11 text-muted">charanjeep@gmail.in</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-success-transparent"><i
                            class="ri-check-fill align-middle me-1"></i>Paid</span></td>
                <td>Mar 14,2022</td>
            </tr>
            <tr>
                <th scope="row">IN-2014</th>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/5.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Samantha Julie</span>
                            </div>
                            <div class="lh-1">
                                <span class="fs-11 text-muted">julie453@gmail.com</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-danger-transparent"><i
                            class="ri-close-fill align-middle me-1"></i>Cancelled</span>
                </td>
                <td>Feb 1,2022</td>
            </tr>
            <tr>
                <th scope="row">IN-2036</th>
                <td>
                    <div class="d-flex align-items-center">
                        <div class="avatar avatar-sm me-2 avatar-rounded">
                            <img src="../assets/images/faces/11.jpg" alt="img">
                        </div>
                        <div>
                            <div class="lh-1">
                                <span>Simon Cohen</span>
                            </div>
                            <div class="lh-1">
                                <span class="fs-11 text-muted">simon@gmail.com</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td><span class="badge bg-light text-dark"><i
                            class="ri-reply-line align-middle me-1"></i>Refunded</span>
                </td>
                <td>Apr 24,2022</td>
            </tr>
        </tbody>
    </table>
</div>
Table Head Primary
User Name Transaction Id Created Status
Harshrath #5182-3467 24 May 2022
Zozo Hadid #5182-3412 02 July 2022
Martiana #5182-3423 15 April 2022
Alex Carey #5182-3456 17 March 2022 
<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-primary">
            <tr>
                <th scope="col">User Name</th>
                <th scope="col">Transaction Id</th>
                <th scope="col">Created</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Harshrath</th>
                <td>#5182-3467</td>
                <td>24 May 2022</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i
                                class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">Zozo Hadid</th>
                <td>#5182-3412</td>
                <td>02 July 2022</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i
                                class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">Martiana</th>
                <td>#5182-3423</td>
                <td>15 April 2022</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i
                                class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">Alex Carey</th>
                <td>#5182-3456</td>
                <td>17 March 2022</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i
                                class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                                class="ri-edit-line"></i></a>
                        <a href="javascript:void(0);"
                            class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
Table Head warning
User Name Transaction Id Created Status
Harshrath #5182-3467 24 May 2022
Zozo Hadid #5182-3412 02 July 2022
Martiana #5182-3423 15 April 2022
Alex Carey #5182-3456 17 March 2022 
<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-warning">
            <tr>
                <th scope="col">User Name</th>
                <th scope="col">Transaction Id</th>
                <th scope="col">Created</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Harshrath</th>
                <td>#5182-3467</td>
                <td>24 May 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Zozo Hadid</th>
                <td>#5182-3412</td>
                <td>02 July 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Martiana</th>
                <td>#5182-3423</td>
                <td>15 April 2022</td>
                <td>
                    <button class="btn btn-sm btn-danger-light">Rejected</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Alex Carey</th>
                <td>#5182-3456</td>
                <td>17 March 2022</td>
                <td>
                    <button class="btn btn-sm btn-success-light">Processed</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
Table Head Success
User Name Transaction Id Created Status
Harshrath #5182-3467 24 May 2022
Zozo Hadid #5182-3412 02 July 2022
Martiana #5182-3423 15 April 2022
Alex Carey #5182-3456 17 March 2022 
<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-success">
            <tr>
                <th scope="col">User Name</th>
                <th scope="col">Transaction Id</th>
                <th scope="col">Created</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Harshrath</th>
                <td>#5182-3467</td>
                <td>24 May 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Zozo Hadid</th>
                <td>#5182-3412</td>
                <td>02 July 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Martiana</th>
                <td>#5182-3423</td>
                <td>15 April 2022</td>
                <td>
                    <button class="btn btn-sm btn-danger-light">Rejected</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Alex Carey</th>
                <td>#5182-3456</td>
                <td>17 March 2022</td>
                <td>
                    <button class="btn btn-sm btn-success-light">Processed</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
Table Head Info
User Name Transaction Id Created Status
Harshrath #5182-3467 24 May 2022
Zozo Hadid #5182-3412 02 July 2022
Martiana #5182-3423 15 April 2022
Alex Carey #5182-3456 17 March 2022 
<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-info">
            <tr>
                <th scope="col">User Name</th>
                <th scope="col">Transaction Id</th>
                <th scope="col">Created</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Harshrath</th>
                <td>#5182-3467</td>
                <td>24 May 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Zozo Hadid</th>
                <td>#5182-3412</td>
                <td>02 July 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Martiana</th>
                <td>#5182-3423</td>
                <td>15 April 2022</td>
                <td>
                    <button class="btn btn-sm btn-danger-light">Rejected</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Alex Carey</th>
                <td>#5182-3456</td>
                <td>17 March 2022</td>
                <td>
                    <button class="btn btn-sm btn-success-light">Processed</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
Table Head Secondary
User Name Transaction Id Created Status
Harshrath #5182-3467 24 May 2022
Zozo Hadid #5182-3412 02 July 2022
Martiana #5182-3423 15 April 2022
Alex Carey #5182-3456 17 March 2022 
<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-secondary">
            <tr>
                <th scope="col">User Name</th>
                <th scope="col">Transaction Id</th>
                <th scope="col">Created</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Harshrath</th>
                <td>#5182-3467</td>
                <td>24 May 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Zozo Hadid</th>
                <td>#5182-3412</td>
                <td>02 July 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Martiana</th>
                <td>#5182-3423</td>
                <td>15 April 2022</td>
                <td>
                    <button class="btn btn-sm btn-danger-light">Rejected</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Alex Carey</th>
                <td>#5182-3456</td>
                <td>17 March 2022</td>
                <td>
                    <button class="btn btn-sm btn-success-light">Processed</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
Table Head Danger
User Name Transaction Id Created Status
Harshrath #5182-3467 24 May 2022
Zozo Hadid #5182-3412 02 July 2022
Martiana #5182-3423 15 April 2022
Alex Carey #5182-3456 17 March 2022 
<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-danger">
            <tr>
                <th scope="col">User Name</th>
                <th scope="col">Transaction Id</th>
                <th scope="col">Created</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Harshrath</th>
                <td>#5182-3467</td>
                <td>24 May 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Zozo Hadid</th>
                <td>#5182-3412</td>
                <td>02 July 2022</td>
                <td>
                    <button class="btn btn-sm btn-primary-light">Pending</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Martiana</th>
                <td>#5182-3423</td>
                <td>15 April 2022</td>
                <td>
                    <button class="btn btn-sm btn-danger-light">Rejected</button>
                </td>
            </tr>
            <tr>
                <th scope="row">Alex Carey</th>
                <td>#5182-3456</td>
                <td>17 March 2022</td>
                <td>
                    <button class="btn btn-sm btn-success-light">Processed</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
Table Foot
S.No Team Matches Won Win Ratio
01 Manchester 232 42%
02 Barcelona 175 58%
03 Portugal 126 32%
Total United States 558 56% 
<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-primary">
            <tr>
                <th scope="col">S.No</th>
                <th scope="col">Team</th>
                <th scope="col">Matches Won</th>
                <th scope="col">Win Ratio</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    01
                </th>
                <td>
                    Manchester
                </td>
                <td>
                    232
                </td>
                <td>
                    <span class="badge bg-primary">42%</span>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    02
                </th>
                <td>
                    Barcelona
                </td>
                <td>
                    175
                </td>
                <td><span class="badge bg-primary">58%</span></td>
            </tr>
            <tr>
                <th scope="row">
                    03
                </th>
                <td>
                    Portugal
                </td>
                <td>
                    126
                </td>
                <td><span class="badge bg-primary">32%</span></td>
            </tr>
        </tbody>
        <tfoot class="table-primary">
            <tr>
                <th scope="row">
                    Total
                </th>
                <td>
                    United States
                </td>
                <td>
                    558
                </td>
                <td><span class="badge bg-primary">56%</span></td>
            </tr>
        </tfoot>
    </table>
</div>
Table With Caption
Top 3 Countries
S.No Country Medals Won No Of Athletes
01 United States 2012 1823
02 United Kingdom 1012 992
03 Germany 914 875 
<div class="table-responsive">
    <table class="table text-nowrap">
        <thead class="table-primary">
            <tr>
                <th scope="col">S.No</th>
                <th scope="col">Team</th>
                <th scope="col">Matches Won</th>
                <th scope="col">Win Ratio</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    01
                </th>
                <td>
                    Manchester
                </td>
                <td>
                    232
                </td>
                <td>
                    <span class="badge bg-primary">42%</span>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    02
                </th>
                <td>
                    Barcelona
                </td>
                <td>
                    175
                </td>
                <td><span class="badge bg-primary">58%</span></td>
            </tr>
            <tr>
                <th scope="row">
                    03
                </th>
                <td>
                    Portugal
                </td>
                <td>
                    126
                </td>
                <td><span class="badge bg-primary">32%</span></td>
            </tr>
        </tbody>
        <tfoot class="table-primary">
            <tr>
                <th scope="row">
                    Total
                </th>
                <td>
                    United States
                </td>
                <td>
                    558
                </td>
                <td><span class="badge bg-primary">56%</span></td>
            </tr>
        </tfoot>
    </table>
</div>
Table With Top Caption
Top IT Companies
S.No Name Revenue Country
1 Microsoft $170 billion United States
2 HP $72 billion United States
3 IBM $60 billion United States 
<div class="table-responsive">
    <table class="table text-nowrap caption-top">
        <caption>Top IT Companies</caption>
        <thead>
            <tr>
                <th scope="col">S.No</th>
                <th scope="col">Name</th>
                <th scope="col">Revenue</th>
                <th scope="col">Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Microsoft</td>
                <td>$170 billion</td>
                <td>United States</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>HP</td>
                <td>$72 billion</td>
                <td>United States</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>IBM</td>
                <td>$60 billion</td>
                <td>United States</td>
            </tr>
        </tbody>
    </table>
</div>
Active Tables
Name Created On Number Status
Mark 21,Dec 2021 +1234-12340 Completed
Monika 29,April 2022 +1523-12459 Failed
Madina 30,Nov 2022 +1982-16234 Successful
Bhamako 18,Mar 2022 +1526-10729 Pending 
<div class="table-responsive">
    <table class="table text-nowrap">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Created On</th>
                <th scope="col">Number</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr class="table-active">
                <th scope="row">Mark</th>
                <td>21,Dec 2021</td>
                <td>+1234-12340</td>
                <td><span class="badge bg-primary">Completed</span></td>
            </tr>
            <tr>
                <th scope="row">Monika</th>
                <td>29,April 2022</td>
                <td>+1523-12459</td>
                <td><span class="badge bg-warning">Failed</span></td>
            </tr>
            <tr>
                <th scope="row">Madina</th>
                <td>30,Nov 2022</td>
                <td class="table-active">+1982-16234</td>
                <td><span class="badge bg-success">Successful</span></td>
            </tr>
            <tr>
                <th scope="row">Bhamako</th>
                <td>18,Mar 2022</td>
                <td>+1526-10729</td>
                <td><span class="badge bg-secondary">Pending</span></td>
            </tr>
        </tbody>
    </table>
</div>
Small Tables
Invoice Created Date Status Action
25-Apr-2021 Paid
29-April-2022 Pending
30-Nov-2022 Paid
01-Jan-2022 Paid
14-Feb-2022 Pending 
<div class="table-responsive">
    <table class="table text-nowrap table-sm">
        <thead>
            <tr>
                <th scope="col">Invoice</th>
                <th scope="col">Created Date</th>
                <th scope="col">Status</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="checkebox-sm" checked="">
                        <label class="form-check-label" for="checkebox-sm">
                            Zelensky
                        </label>
                    </div>
                </th>
                <td>25-Apr-2021</td>
                <td><span class="badge bg-success-transparent">Paid</span></td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="checkebox-sm1">
                        <label class="form-check-label" for="checkebox-sm1">
                            Kim Jong
                        </label>
                    </div>
                </th>
                <td>29-April-2022</td>
                <td><span class="badge bg-danger-transparent">Pending</span></td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="checkebox-sm2">
                        <label class="form-check-label" for="checkebox-sm2">
                            Obana
                        </label>
                    </div>
                </th>
                <td>30-Nov-2022</td>
                <td><span class="badge bg-success-transparent">Paid</span></td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="checkebox-sm3">
                        <label class="form-check-label" for="checkebox-sm3">
                            Sean Paul
                        </label>
                    </div>
                </th>
                <td>01-Jan-2022</td>
                <td><span class="badge bg-success-transparent">Paid</span></td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="checkebox-sm4">
                        <label class="form-check-label" for="checkebox-sm4">
                            Karizma
                        </label>
                    </div>
                </th>
                <td>14-Feb-2022</td>
                <td><span class="badge bg-danger-transparent">Pending</span></td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
Color variants tables
Color Client State Quantity Total Price
Default Rita Book Processed 22 $2,012
Primary Rhoda Report Processed 22 $4,254
Secondary Rita Book Processed 26 $1,234
Success Anne Teak Processed 42 $2,623
Danger Dee End Processed 52 $32,132
Warning Lee Nonmi Processed 10 $1,434
Info Lynne Gwistic Processed 63 $1,854
Light Fran Tick Processed 05 $823
Dark Polly Pipe Processed 35 $1,832 
<div class="table-responsive">
    <table class="table text-nowrap">
        <thead>
            <tr>
                <th scope="col">Color</th>
                <th scope="col">Client</th>
                <th scope="col">State</th>
                <th scope="col">Quantity</th>
                <th scope="col">Total Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Default</th>
                <td>Rita Book</td>
                <td><span class="badge bg-primary-transparent">Processed</span></td>
                <td>22</td>
                <td>$2,012</td>
            </tr>

            <tr class="table-primary">
                <th scope="row">Primary</th>
                <td>Rhoda Report</td>
                <td><span class="badge bg-primary">Processed</span></td>
                <td>22</td>
                <td>$4,254</td>
            </tr>
            <tr class="table-secondary">
                <th scope="row">Secondary</th>
                <td>Rita Book</td>
                <td><span class="badge bg-secondary">Processed</span></td>
                <td>26</td>
                <td>$1,234</td>
            </tr>
            <tr class="table-success">
                <th scope="row">Success</th>
                <td>Anne Teak</td>
                <td><span class="badge bg-success">Processed</span></td>
                <td>42</td>
                <td>$2,623</td>
            </tr>
            <tr class="table-danger">
                <th scope="row">Danger</th>
                <td>Dee End</td>
                <td><span class="badge bg-danger">Processed</span></td>
                <td>52</td>
                <td>$32,132</td>
            </tr>
            <tr class="table-warning">
                <th scope="row">Warning</th>
                <td>Lee Nonmi</td>
                <td><span class="badge bg-warning">Processed</span></td>
                <td>10</td>
                <td>$1,434</td>
            </tr>
            <tr class="table-info">
                <th scope="row">Info</th>
                <td>Lynne Gwistic</td>
                <td><span class="badge bg-info">Processed</span></td>
                <td>63</td>
                <td>$1,854</td>
            </tr>
            <tr class="table-light">
                <th scope="row">Light</th>
                <td>Fran Tick</td>
                <td><span class="badge bg-light text-dark">Processed</span></td>
                <td>05</td>
                <td>$823</td>
            </tr>
            <tr class="table-dark">
                <th scope="row">Dark</th>
                <td>Polly Pipe</td>
                <td><span class="badge bg-dark text-white">Processed</span></td>
                <td>35</td>
                <td>$1,832</td>
            </tr>
        </tbody>
    </table>
</div>
Nesting
# First Last Handle
1 Mark Otto @mdo
Aplhabets Users Email
A Dino King dinoking231@gmail.com
B Poppins sams pops@gmail.com
C Brian Shaw swanbrian@gmail.com
3 Larry the Bird @twitter
4 Jimmy the Ostrich Dummy Text
5 Cobra Kai the Snake Another Name 
<div class="table-responsive">
    <table class="table text-nowrap table-striped table-bordered">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td colspan="4">
                    <table class="table text-nowrap mb-0">
                        <thead>
                            <tr>
                                <th scope="col">Aplhabets</th>
                                <th scope="col">Users</th>
                                <th scope="col">Email</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">A</th>
                                <td>Dino King</td>
                                <td>dinoking231@gmail.com</td>
                            </tr>
                            <tr>
                                <th scope="row">B</th>
                                <td>Poppins sams</td>
                                <td>pops@gmail.com</td>
                            </tr>
                            <tr>
                                <th scope="row">C</th>
                                <td>Brian Shaw</td>
                                <td>swanbrian@gmail.com</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>Jimmy</td>
                <td>the Ostrich</td>
                <td>Dummy Text</td>
            </tr>
            <tr>
                <th scope="row">5</th>
                <td>Cobra Kai</td>
                <td>the Snake</td>
                <td>Another Name</td>
            </tr>
        </tbody>
    </table>
</div>
Always responsive
Team Head Category Role Gmail Team Work Progress Revenue Action
img Mayor Kelly
Manufacturer Team Lead mayorkrlly@gmail.com
img img img +4
$10,984.29
img Andrew Garfield
Managing Director Director andrewgarfield@gmail.com
img img img img +4
$1.4billion
img Simon Cowel
Service Manager Manager simoncowel234@gmail.com
img img +10
$7,123.21
img Mirinda Hers
Recruiter Employee mirindahers@gmail.com
img img img +6
$2,325.45 
<div class="table-responsive">
    <table class="table text-nowrap">
        <thead>
            <tr>
                <th scope="col"><input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="..."></th>
                <th scope="col">Team Head</th>
                <th scope="col">Category</th>
                <th scope="col">Role</th>
                <th scope="col">Gmail</th>
                <th scope="col">Team</th>
                <th scope="col">Work Progress</th>
                <th scope="col">Revenue</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row"><input class="form-check-input" type="checkbox" id="checkboxNoLabel1" value="" aria-label="..."></th>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/3.jpg" alt="img">
                        </span>Mayor Kelly
                    </div>
                </td>
                <td>Manufacturer</td>
                <td><span class="badge bg-primary-transparent">Team Lead</span></td>
                <td>mayorkrlly@gmail.com</td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/2.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/8.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/2.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded" href="javascript:void(0);">
                            +4
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 52%" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                </td>
                <td>$10,984.29</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-success"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row"><input class="form-check-input" type="checkbox" id="checkboxNoLabel2" value="" aria-label="..."></th>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/12.jpg" alt="img">
                        </span>Andrew Garfield
                    </div>
                </td>
                <td>Managing Director</td>
                <td><span class="badge bg-warning-transparent">Director</span></td>
                <td>andrewgarfield@gmail.com</td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/1.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/5.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/11.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/15.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded" href="javascript:void(0);">
                            +4
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 91%" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                </td>
                <td>$1.4billion</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-success"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row"><input class="form-check-input" type="checkbox" id="checkboxNoLabel3" value="" aria-label="..."></th>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/14.jpg" alt="img">
                        </span>Simon Cowel
                    </div>
                </td>
                <td>Service Manager</td>
                <td><span class="badge bg-success-transparent">Manager</span></td>
                <td>simoncowel234@gmail.com</td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/6.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/16.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded" href="javascript:void(0);">
                            +10
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                </td>
                <td>$7,123.21</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-success"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row"><input class="form-check-input" type="checkbox" id="checkboxNoLabel13" value="" aria-label="..."></th>
                <td>
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-xs me-2 online avatar-rounded">
                            <img src="../assets/images/faces/5.jpg" alt="img">
                        </span>Mirinda Hers
                    </div>
                </td>
                <td>Recruiter</td>
                <td><span class="badge bg-danger-transparent">Employee</span></td>
                <td>mirindahers@gmail.com</td>
                <td>
                    <div class="avatar-list-stacked">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/3.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/10.jpg" alt="img">
                        </span>
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="../assets/images/faces/14.jpg" alt="img">
                        </span>
                        <a class="avatar avatar-sm bg-primary text-fixed-white avatar-rounded" href="javascript:void(0);">
                            +6
                        </a>
                    </div>
                </td>
                <td>
                    <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 21%" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                </td>
                <td>$2,325.45</td>
                <td>
                    <div class="hstack gap-2 fs-15">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-success"><i class="ri-download-2-line"></i></a>
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info"><i class="ri-edit-line"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
Vertical alignment
Heading 1 Heading 2 Heading 3 Heading 4
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell is aligned to the top. This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. 
<div class="table-responsive">
    <table class="table align-middle">
        <thead>
            <tr>
                <th scope="col" class="w-25">Heading 1</th>
                <th scope="col" class="w-25">Heading 2</th>
                <th scope="col" class="w-25">Heading 3</th>
                <th scope="col" class="w-25">Heading 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>This cell inherits <code>vertical-align: middle;</code> from
                    the
                    table</td>
                <td>This cell inherits <code>vertical-align: middle;</code> from
                    the
                    table</td>
                <td>This cell inherits <code>vertical-align: middle;</code> from
                    the
                    table</td>
                <td>This here is some placeholder text, intended to take up
                    quite a
                    bit of vertical space, to demonstrate how the vertical
                    alignment
                    works in the preceding cells.</td>
            </tr>
            <tr class="align-bottom">
                <td>This cell inherits <code>vertical-align: bottom;</code> from
                    the
                    table row</td>
                <td>This cell inherits <code>vertical-align: bottom;</code> from
                    the
                    table row</td>
                <td>This cell inherits <code>vertical-align: bottom;</code> from
                    the
                    table row</td>
                <td>This here is some placeholder text, intended to take up
                    quite a
                    bit of vertical space, to demonstrate how the vertical
                    alignment
                    works in the preceding cells.</td>
            </tr>
            <tr>
                <td>This cell inherits <code>vertical-align: middle;</code> from
                    the
                    table</td>
                <td>This cell inherits <code>vertical-align: middle;</code> from
                    the
                    table</td>
                <td class="align-top">This cell is aligned to the top.</td>
                <td>This here is some placeholder text, intended to take up
                    quite a
                    bit of vertical space, to demonstrate how the vertical
                    alignment
                    works in the preceding cells.</td>
            </tr>
        </tbody>
    </table>
</div>