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="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/6.jpg" alt="img">
                                </span>Hasimna
                            </div>
                        </th>
                        <td><span class="badge bg-light text-default">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="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/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>
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>
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-default">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="https://laravelui.spruko.com/synto/build/assets/img/users/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-default">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="https://laravelui.spruko.com/synto/build/assets/img/users/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-default">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="https://laravelui.spruko.com/synto/build/assets/img/users/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-default">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="https://laravelui.spruko.com/synto/build/assets/img/users/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-default">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="https://laravelui.spruko.com/synto/build/assets/img/users/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-default">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="https://laravelui.spruko.com/synto/build/assets/img/users/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-default">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="https://laravelui.spruko.com/synto/build/assets/img/users/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-default">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="https://laravelui.spruko.com/synto/build/assets/img/users/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-default">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="https://laravelui.spruko.com/synto/build/assets/img/users/2.jpg" alt="img">
                                </span>Pamila Anderson
                            </div>
                        </td>
                        <td><span class="badge bg-warning-transparent">Accepted</span></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="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/2.jpg" alt="img">
                                </span>
                                <span class="avatar avatar-sm avatar-rounded">
                                    <img src="https://laravelui.spruko.com/synto/build/assets/img/users/8.jpg" alt="img">
                                </span>
                                <span class="avatar avatar-sm avatar-rounded">
                                    <img src="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/4.jpg" alt="img">
                                </span>
                                <span class="avatar avatar-sm avatar-rounded">
                                    <img src="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
                                </span>
                                <span class="avatar avatar-sm avatar-rounded">
                                    <img src="https://laravelui.spruko.com/synto/build/assets/img/users/11.jpg" alt="img">
                                </span>
                                <span class="avatar avatar-sm avatar-rounded">
                                    <img src="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/4.jpg" alt="img">
                                </span>
                                <span class="avatar avatar-sm avatar-rounded">
                                    <img src="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/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-default"><i
                                    class="ri-reply-line align-middle me-1"></i>Refunded</span>
                        </td>
                        <td>Apr 24,2022</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>
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-th-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-th-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-th-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-th-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-th-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-th-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 
<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-default">Processed</span></td>
                        <td>05</td>
                        <td>$823</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>
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>
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="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/2.jpg" alt="img">
                                </span>
                                <span class="avatar avatar-sm avatar-rounded">
                                    <img src="https://laravelui.spruko.com/synto/build/assets/img/users/8.jpg" alt="img">
                                </span>
                                <span class="avatar avatar-sm avatar-rounded">
                                    <img src="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
                                </span>
                                <span class="avatar avatar-sm avatar-rounded">
                                    <img src="https://laravelui.spruko.com/synto/build/assets/img/users/5.jpg" alt="img">
                                </span>
                                <span class="avatar avatar-sm avatar-rounded">
                                    <img src="https://laravelui.spruko.com/synto/build/assets/img/users/11.jpg" alt="img">
                                </span>
                                <span class="avatar avatar-sm avatar-rounded">
                                    <img src="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/6.jpg" alt="img">
                                </span>
                                <span class="avatar avatar-sm avatar-rounded">
                                    <img src="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/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="https://laravelui.spruko.com/synto/build/assets/img/users/3.jpg" alt="img">
                                </span>
                                <span class="avatar avatar-sm avatar-rounded">
                                    <img src="https://laravelui.spruko.com/synto/build/assets/img/users/10.jpg" alt="img">
                                </span>
                                <span class="avatar avatar-sm avatar-rounded">
                                    <img src="https://laravelui.spruko.com/synto/build/assets/img/users/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>