Basic Tables | Velzon - Admin & Dashboard Template

#### Are you sure ?

Are you sure you want to remove this Notification ?

#### Basic Tables

#### Default Table

Show Code

Use `table` class to show bootstrap-based default table.

ID | Customer | Date | Invoice | Action
--- | --- | --- | --- | ---
#VZ2110 | Bobby Davis | October 15, 2021 | $2,300 | View More
#VZ2109 | Christopher Neal | October 7, 2021 | $5,500 | View More
#VZ2108 | Monkey Karry | October 5, 2021 | $2,420 | View More
#VZ2107 | James White | October 2, 2021 | $7,452 | View More

    <table class="table table-nowrap">
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Customer</th>
                <th scope="col">Date</th>
                <th scope="col">Invoice</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row"><a href="#" class="fw-semibold">#VZ2110</a></th>
                <td>Bobby Davis</td>
                <td>October 15, 2021</td>
                <td>$2,300</td>
                <td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
            </tr>
            <tr>
                <th scope="row"><a href="#" class="fw-semibold">#VZ2109</a></th>
                <td>Christopher Neal</td>
                <td>October 7, 2021</td>
                <td>$5,500</td>
                <td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
            </tr>
            <tr>
                <th scope="row"><a href="#" class="fw-semibold">#VZ2108</a></th>
                <td>Monkey Karry</td>
                <td>October 5, 2021</td>
                <td>$2,420</td>
                <td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
            </tr>
            <tr>
                <th scope="row"><a href="#" class="fw-semibold">#VZ2107</a></th>
                <td>James White</td>
                <td>October 2, 2021</td>
                <td>$7,452</td>
                <td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-right-line align-middle"></i></a></td>
            </tr>
        </tbody>
    </table>

#### Striped Rows

Show Code

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

ID | Customer | Date | Invoice | Action
--- | --- | --- | --- | ---
01 | Bobby Davis | Nov 14, 2021 | $2,410 | Confirmed
02 | Christopher Neal | Nov 21, 2021 | $1,450 | Waiting
03 | Monkey Karry | Nov 24, 2021 | $3,500 | Confirmed
04 | Aaron James | Nov 25, 2021 | $6,875 | Cancelled

    <!-- Striped Rows -->
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Customer</th>
                <th scope="col">Date</th>
                <th scope="col">Invoice</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Bobby Davis</td>
                <td>Nov 14, 2021</td>
                <td>$2,410</td>
                <td><span class="badge bg-success">Confirmed</span></td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Christopher Neal</td>
                <td>Nov 21, 2021</td>
                <td>$1,450</td>
                <td><span class="badge bg-warning">Waiting</span></td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Monkey Karry</td>
                <td>Nov 24, 2021</td>
                <td>$3,500</td>
                <td><span class="badge bg-success">Confirmed</span></td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>Aaron James</td>
                <td>Nov 25, 2021</td>
                <td>$6,875</td>
                <td><span class="badge bg-danger">Cancelled</span></td>
            </tr>
        </tbody>
    </table>

#### Striped columns

Show Code

Use .`table-striped-columns` to add zebra-striping to any table column.

| ID | Name | Date | Total | Status | Action
--- | --- | --- | --- | --- | --- | ---
| #VL2110 | William Elmore | 07 Oct, 2021 | $24.05 | Paid |
| #VL2109 | Georgie Winters | 07 Oct, 2021 | $26.15 | Paid |
| #VL2108 | Whitney Meier | 06 Oct, 2021 | $21.25 | Refund |
| #VL2107 | Justin Maier | 05 Oct, 2021 | $25.03 | Paid |

    <div class="table-responsive table-card">
        <table class="table table-nowrap table-striped-columns mb-0">
            <thead class="table-light">
                <tr>
                    <th scope="col">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="cardtableCheck">
                            <label class="form-check-label" for="cardtableCheck"></label>
                        </div>
                    </th>
                    <th scope="col">Id</th>
                    <th scope="col">Name</th>
                    <th scope="col">Date</th>
                    <th scope="col">Total</th>
                    <th scope="col">Status</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="cardtableCheck01">
                            <label class="form-check-label" for="cardtableCheck01"></label>
                        </div>
                    </td>
                    <td><a href="#" class="fw-semibold">#VL2110</a></td>
                    <td>William Elmore</td>
                    <td>07 Oct, 2021</td>
                    <td>$24.05</td>
                    <td><span class="badge bg-success">Paid</span></td>
                    <td>
                        <button type="button" class="btn btn-sm btn-light">Details</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="cardtableCheck02">
                            <label class="form-check-label" for="cardtableCheck02"></label>
                        </div>
                    </td>
                    <td><a href="#" class="fw-semibold">#VL2109</a></td>
                    <td>Georgie Winters</td>
                    <td>07 Oct, 2021</td>
                    <td>$26.15</td>
                    <td><span class="badge bg-success">Paid</span></td>
                    <td>
                        <button type="button" class="btn btn-sm btn-light">Details</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="cardtableCheck03">
                            <label class="form-check-label" for="cardtableCheck03"></label>
                        </div>
                    </td>
                    <td><a href="#" class="fw-semibold">#VL2108</a></td>
                    <td>Whitney Meier</td>
                    <td>06 Oct, 2021</td>
                    <td>$21.25</td>
                    <td><span class="badge bg-danger">Refund</span></td>
                    <td>
                        <button type="button" class="btn btn-sm btn-light">Details</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="cardtableCheck04">
                            <label class="form-check-label" for="cardtableCheck04"></label>
                        </div>
                    </td>
                    <td><a href="#" class="fw-semibold">#VL2107</a></td>
                    <td>Justin Maier</td>
                    <td>05 Oct, 2021</td>
                    <td>$25.03</td>
                    <td><span class="badge bg-success">Paid</span></td>
                    <td>
                        <button type="button" class="btn btn-sm btn-light">Details</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

#### Tables Colors

Show Code

Use `table-dark` class to set dark color table body and `table-success` class to set success color table body respectively. use `table-` class with different color variation to set required table body color.

ID | Customer | Date | Invoice
--- | --- | --- | ---
01 | Bobby Davis | Nov 14, 2021 | $2,410
02 | Christopher Neal | Nov 21, 2021 | $1,450
03 | Monkey Karry | Nov 24, 2021 | $3,500
04 | Aaron James | Nov 25, 2021 | $6,875

ID | Invoice | Amount | Date | Status | Action
--- | --- | --- | --- | --- | ---
01 | Basic Plan | $860 | Nov 22, 2021 | Subscribed |
02 | Premium Plan | $1200 | Nov 10, 2021 | Unsubscribed |
03 | Basic Plan | $860 | Nov 19, 2021 | Subscribed |
04 | Corporate Plan | $1599 | Nov 22, 2021 | Subscribed |

    <!-- Table Dark -->
    <table class="table table-dark table-striped table-nowrap">
        <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Customer</th>
                <th scope="col">Date</th>
                <th scope="col">Invoice</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Bobby Davis</td>
                <td>Nov 14, 2021</td>
                <td>$2,410</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Christopher Neal</td>
                <td>Nov 21, 2021</td>
                <td>$1,450</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Monkey Karry</td>
                <td>Nov 24, 2021</td>
                <td>$3,500</td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>Aaron James</td>
                <td>Nov 25, 2021</td>
                <td>$6,875</td>
            </tr>
        </tbody>
    </table>

    <table class="table table-success table-striped align-middle table-nowrap mb-0">
        <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Invoice</th>
                <th scope="col">Amount</th>
                <th scope="col">Date</th>
                <th scope="col">Status</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Basic Plan</td>
                <td>$860</td>
                <td>Nov 22, 2021</td>
                <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
                <td>
                    <div class="hstack gap-3 flex-wrap">
                        <a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
                        <a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Premium Plan</td>
                <td>$1200</td>
                <td>Nov 10, 2021</td>
                <td><i class="ri-close-circle-line align-middle text-danger"></i> Unsubscribed</td>
                <td>
                    <div class="hstack gap-3 flex-wrap">
                        <a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
                        <a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Basic Plan</td>
                <td>$860</td>
                <td>Nov 19, 2021</td>
                <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
                <td>
                    <div class="hstack gap-3 flex-wrap">
                        <a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
                        <a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>Corporate Plan</td>
                <td>$1599</td>
                <td>Nov 22, 2021</td>
                <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
                <td>
                    <div class="hstack gap-3 flex-wrap">
                        <a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
                        <a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

#### Hoverable Rows

Show Code

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

| Order ID | Shop | Customer | Price | Action
--- | --- | --- | --- | --- | ---
| #541254265 | Amezon | Cleo Carson | $4,521 |
| #744145235 | Shoppers | Juston Eichmann | $7,546 |
| #9855126598 | Flipkart | Bettie Johson | $1,350 |
| #847512653 | Shoppers | Maritza Blanda | $4,521 |

ID | Invoice | Amount | Date | Status | Action
--- | --- | --- | --- | --- | ---
01 | Basic Plan | $860 | Nov 22, 2021 | Subscribed | Yes/No
02 | Premium Plan | $1200 | Nov 10, 2021 | Unsubscribed | Yes/No
03 | Basic Plan | $860 | Nov 19, 2021 | Subscribed | Yes/No
04 | Corporate Plan | $1599 | Nov 22, 2021 | Subscribed | Yes/No

    <!-- Hoverable Rows -->
    <table class="table table-hover table-nowrap mb-0">
        <thead>
            <tr>
                <th scope="col">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="checkAll" value="option1">
                    </div>
                </th>
                <th scope="col">Order ID</th>
                <th scope="col">Shop</th>
                <th scope="col">Customer</th>
                <th scope="col">Price</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option1" checked>
                    </div>
                </th>
                <td>#541254265</td>
                <td>Amezon</td>
                <td>Cleo Carson</td>
                <td>$4,521</td>
                <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option1" checked>
                    </div>
                </th>
                <td>#744145235</td>
                <td>Shoppers</td>
                <td>Juston Eichmann</td>
                <td>$7,546</td>
                <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option1">
                    </div>
                </th>
                <td>#9855126598</td>
                <td>Flipkart</td>
                <td>Bettie Johson</td>
                <td>$1,350</td>
                <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="inlineCheckbox5" value="option1">
                    </div>
                </th>
                <td>#847512653</td>
                <td>Shoppers</td>
                <td>Maritza Blanda</td>
                <td>$4,521</td>
                <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
            </tr>
        </tbody>
    </table>

    <table class="table table-hover table-striped align-middle table-nowrap mb-0">
        <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Invoice</th>
                <th scope="col">Amount</th>
                <th scope="col">Date</th>
                <th scope="col">Status</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Basic Plan</td>
                <td>$860</td>
                <td>Nov 22, 2021</td>
                <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
                <td>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck1" checked="">
                        <label class="form-check-label" for="SwitchCheck1">Yes/No</label>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Premium Plan</td>
                <td>$1200</td>
                <td>Nov 10, 2021</td>
                <td><i class="ri-close-circle-line align-middle text-danger"></i> Unsubscribed</td>
                <td>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck2">
                        <label class="form-check-label" for="SwitchCheck2">Yes/No</label>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Basic Plan</td>
                <td>$860</td>
                <td>Nov 19, 2021</td>
                <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
                <td>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck3">
                        <label class="form-check-label" for="SwitchCheck3">Yes/No</label>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>Corporate Plan</td>
                <td>$1599</td>
                <td>Nov 22, 2021</td>
                <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
                <td>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck4" checked="">
                        <label class="form-check-label" for="SwitchCheck4">Yes/No</label>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

#### Card Tables

Show Code

Use `table-card` class to show card-based table within a <tbody>.

| ID | Name | Date | Total | Status | Action
--- | --- | --- | --- | --- | --- | ---
| #VL2110 | William Elmore | 07 Oct, 2021 | $24.05 | Paid |
| #VL2109 | Georgie Winters | 07 Oct, 2021 | $26.15 | Paid |
| #VL2108 | Whitney Meier | 06 Oct, 2021 | $21.25 | Refund |
| #VL2107 | Justin Maier | 05 Oct, 2021 | $25.03 | Paid |

    <div class="table-responsive table-card">
        <table class="table table-nowrap mb-0">
            <thead class="table-light">
                <tr>
                    <th scope="col">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="cardtableCheck">
                            <label class="form-check-label" for="cardtableCheck"></label>
                        </div>
                    </th>
                    <th scope="col">Id</th>
                    <th scope="col">Name</th>
                    <th scope="col">Date</th>
                    <th scope="col">Total</th>
                    <th scope="col">Status</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="cardtableCheck01">
                            <label class="form-check-label" for="cardtableCheck01"></label>
                        </div>
                    </td>
                    <td><a href="#" class="fw-semibold">#VL2110</a></td>
                    <td>William Elmore</td>
                    <td>07 Oct, 2021</td>
                    <td>$24.05</td>
                    <td><span class="badge bg-success">Paid</span></td>
                    <td>
                        <button type="button" class="btn btn-sm btn-light">Details</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="cardtableCheck02">
                            <label class="form-check-label" for="cardtableCheck02"></label>
                        </div>
                    </td>
                    <td><a href="#" class="fw-semibold">#VL2109</a></td>
                    <td>Georgie Winters</td>
                    <td>07 Oct, 2021</td>
                    <td>$26.15</td>
                    <td><span class="badge bg-success">Paid</span></td>
                    <td>
                        <button type="button" class="btn btn-sm btn-light">Details</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="cardtableCheck03">
                            <label class="form-check-label" for="cardtableCheck03"></label>
                        </div>
                    </td>
                    <td><a href="#" class="fw-semibold">#VL2108</a></td>
                    <td>Whitney Meier</td>
                    <td>06 Oct, 2021</td>
                    <td>$21.25</td>
                    <td><span class="badge bg-danger">Refund</span></td>
                    <td>
                        <button type="button" class="btn btn-sm btn-light">Details</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="cardtableCheck04">
                            <label class="form-check-label" for="cardtableCheck04"></label>
                        </div>
                    </td>
                    <td><a href="#" class="fw-semibold">#VL2107</a></td>
                    <td>Justin Maier</td>
                    <td>05 Oct, 2021</td>
                    <td>$25.03</td>
                    <td><span class="badge bg-success">Paid</span></td>
                    <td>
                        <button type="button" class="btn btn-sm btn-light">Details</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

#### Active Tables

Show Code

Use `table-active` class to highlight a table row or cell.

| Order ID | Shop | Customer | Price | Action
--- | --- | --- | --- | --- | ---
| #541254265 | Amezon | Cleo Carson | $4,521 |
| #744145235 | Shoppers | Juston Eichmann | $7,546 |
| #9855126598 | Flipkart | Bettie Johson | $1,350 |
| #847512653 | Shoppers | Maritza Blanda | $4,521 |

    <!-- Active Tables -->
    <table class="table table-nowrap mb-0">
        <thead>
            <tr>
                <th scope="col">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="activetableCheck">
                        <label class="form-check-label" for="activetableCheck"></label>
                    </div>
                </th>
                <th scope="col">Order ID</th>
                <th scope="col">Shop</th>
                <th scope="col">Customer</th>
                <th scope="col">Price</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="activetableCheck01" checked>
                        <label class="form-check-label" for="activetableCheck01"></label>
                    </div>
                </th>
                <td>#541254265</td>
                <td>Amezon</td>
                <td>Cleo Carson</td>
                <td>$4,521</td>
                <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
            </tr>
            <tr class="table-active">
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="activetableCheck02" checked>
                        <label class="form-check-label" for="activetableCheck02"></label>
                    </div>
                </th>
                <td>#744145235</td>
                <td>Shoppers</td>
                <td>Juston Eichmann</td>
                <td>$7,546</td>
                <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="activetableCheck03">
                        <label class="form-check-label" for="activetableCheck03"></label>
                    </div>
                </th>
                <td>#9855126598</td>
                <td>Flipkart</td>
                <td>Bettie Johson</td>
                <td>$1,350</td>
                <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="activetableCheck04">
                        <label class="form-check-label" for="activetableCheck04"></label>
                    </div>
                </th>
                <td>#847512653</td>
                <td>Shoppers</td>
                <td class="table-active">Maritza Blanda</td>
                <td>$4,521</td>
                <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
            </tr>
        </tbody>
    </table>

#### Bordered Tables

Show Code

Use `table-bordered` class to show borders on all sides of the table and cells.

ID | Title | Status | Assignee | Price |
--- | --- | --- | --- | --- | ---
01 | Implement new UX | Backlog | Lanora Sandoval | $4,521 |
02 | Design syntax | In Progress | Calvin Garrett | $7,546 |
03 | Configurable resources | Done | Florence Guzman | $1,350 |
04 | Implement extensions | In Progress | Maritza Blanda | $4,521 |

    <!-- Bordered Tables -->
    <table class="table table-bordered table-nowrap">
        <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Title</th>
                <th scope="col">Status</th>
                <th scope="col">Assignee</th>
                <th scope="col">Price</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Implement new UX</td>
                <td><span class="badge bg-primary-subtle text-primary">Backlog</span></td>
                <td>Lanora Sandoval</td>
                <td>$4,521</td>
                <td>
                    <div class="dropdown">
                        <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ri-more-2-fill"></i>
                        </a>

                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <li><a class="dropdown-item" href="#">View</a></li>
                            <li><a class="dropdown-item" href="#">Edit</a></li>
                            <li><a class="dropdown-item" href="#">Delete</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Design syntax</td>
                <td><span class="badge bg-secondary-subtle text-secondary">In Progress</span></td>
                <td>Calvin Garrett</td>
                <td>$7,546</td>
                <td>
                    <div class="dropdown">
                        <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ri-more-2-fill"></i>
                        </a>

                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <li><a class="dropdown-item" href="#">View</a></li>
                            <li><a class="dropdown-item" href="#">Edit</a></li>
                            <li><a class="dropdown-item" href="#">Delete</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Configurable resources</td>
                <td><span class="badge bg-success-subtle text-success">Done</span></td>
                <td>Florence Guzman</td>
                <td>$1,350</td>
                <td>
                    <div class="dropdown">
                        <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ri-more-2-fill"></i>
                        </a>

                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <li><a class="dropdown-item" href="#">View</a></li>
                            <li><a class="dropdown-item" href="#">Edit</a></li>
                            <li><a class="dropdown-item" href="#">Delete</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>Implement extensions</td>
                <td><span class="badge bg-secondary-subtle text-secondary">In Progress</span></td>
                <td>Maritza Blanda</td>
                <td>$4,521</td>
                <td>
                    <div class="dropdown">
                        <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ri-more-2-fill"></i>
                        </a>

                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <li><a class="dropdown-item" href="#">View</a></li>
                            <li><a class="dropdown-item" href="#">Edit</a></li>
                            <li><a class="dropdown-item" href="#">Delete</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

#### Tables Border Colors

Show Code

Use `border-` class with color variation class to set table border color.

ID | Title | Status | Assignee | Price |
--- | --- | --- | --- | --- | ---
01 | Implement new UX | Backlog | Lanora Sandoval | $4,521 |
02 | Design syntax | In Progress | Calvin Garrett | $7,546 |
03 | Configurable resources | Done | Florence Guzman | $1,350 |
04 | Implement extensions | In Progress | Maritza Blanda | $4,521 |

    <!-- Tables Border Colors -->
    <table class="table table-bordered border-secondary table-nowrap">
        <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Title</th>
                <th scope="col">Status</th>
                <th scope="col">Assignee</th>
                <th scope="col">Price</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Implement new UX</td>
                <td><span class="badge bg-primary-subtle text-primary">Backlog</span></td>
                <td>Lanora Sandoval</td>
                <td>$4,521</td>
                <td>
                    <div class="dropdown">
                        <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ri-more-2-fill"></i>
                        </a>

                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <li><a class="dropdown-item" href="#">View</a></li>
                            <li><a class="dropdown-item" href="#">Edit</a></li>
                            <li><a class="dropdown-item" href="#">Delete</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Design syntax</td>
                <td><span class="badge bg-secondary-subtle text-secondary">In Progress</span></td>
                <td>Calvin Garrett</td>
                <td>$7,546</td>
                <td>
                    <div class="dropdown">
                        <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ri-more-2-fill"></i>
                        </a>

                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <li><a class="dropdown-item" href="#">View</a></li>
                            <li><a class="dropdown-item" href="#">Edit</a></li>
                            <li><a class="dropdown-item" href="#">Delete</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Configurable resources</td>
                <td><span class="badge bg-success-subtle text-success">Done</span></td>
                <td>Florence Guzman</td>
                <td>$1,350</td>
                <td>
                    <div class="dropdown">
                        <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ri-more-2-fill"></i>
                        </a>

                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <li><a class="dropdown-item" href="#">View</a></li>
                            <li><a class="dropdown-item" href="#">Edit</a></li>
                            <li><a class="dropdown-item" href="#">Delete</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>Implement extensions</td>
                <td><span class="badge bg-secondary-subtle text-secondary">In Progress</span></td>
                <td>Maritza Blanda</td>
                <td>$4,521</td>
                <td>
                    <div class="dropdown">
                        <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ri-more-2-fill"></i>
                        </a>

                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <li><a class="dropdown-item" href="#">View</a></li>
                            <li><a class="dropdown-item" href="#">Edit</a></li>
                            <li><a class="dropdown-item" href="#">Delete</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

#### Tables Without Borders

Show Code

Use `table-borderless` to set a table without borders.

ID | Name | Job Title | Date | Status |
--- | --- | --- | --- | --- | ---
01 | Annette Black | Industrial Designer | 10, Nov 2021 | Active |
02 | Bessie Cooper | Graphic Designer | 13, Nov 2021 | Active |
03 | Leslie Alexander | Product Manager | 17, Nov 2021 | Active |
04 | Lenora Sandoval | Applications Engineer | 25, Nov 2021 | Disabled |

    <!-- Tables Without Borders -->
    <table class="table table-borderless table-nowrap">
        <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Name</th>
                <th scope="col">Job Title</th>
                <th scope="col">Date</th>
                <th scope="col">Status</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Annette Black</td>
                <td>Industrial Designer</td>
                <td>10, Nov 2021</td>
                <td><span class="badge bg-success-subtle text-success">Active</span></td>
                <td>
                    <div class="hstack gap-3 fs-15">
                        <a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
                        <a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Bessie Cooper</td>
                <td>Graphic Designer</td>
                <td>13, Nov 2021</td>
                <td><span class="badge bg-success-subtle text-success">Active</span></td>
                <td>
                    <div class="hstack gap-3 fs-15">
                        <a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
                        <a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Leslie Alexander</td>
                <td>Product Manager</td>
                <td>17, Nov 2021</td>
                <td><span class="badge bg-success-subtle text-success">Active</span></td>
                <td>
                    <div class="hstack gap-3 fs-15">
                        <a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
                        <a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>Lenora Sandoval</td>
                <td>Applications Engineer</td>
                <td>25, Nov 2021</td>
                <td><span class="badge bg-danger-subtle text-danger">Disabled</span></td>
                <td>
                    <div class="hstack gap-3 fs-15">
                        <a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
                        <a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

#### Small Tables

Show Code

Use `table-sm` class to create any table more compact by cutting all cell padding in half.

ID | Title | Status | Assignee
--- | --- | --- | ---
01 | Implement new UX | Backlog | Lanora Sandoval
02 | Design syntax | In Progress | Calvin Garrett
03 | Configurable resources | Done | Florence Guzman
04 | Implement extensions | Backlog | Maritza Blanda
05 | Applications Engineer | Done | Leslie Alexander

    <!-- Small Tables -->
    <table class="table table-sm table-nowrap">
        <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Title</th>
                <th scope="col">Status</th>
                <th scope="col">Assignee</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Implement new UX</td>
                <td><span class="badge bg-primary-subtle text-primary">Backlog</span></td>
                <td>Lanora Sandoval</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Design syntax</td>
                <td><span class="badge bg-secondary-subtle text-secondary">In Progress</span></td>
                <td>Calvin Garrett</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Configurable resources</td>
                <td><span class="badge bg-success-subtle text-success">Done</span></td>
                <td>Florence Guzman</td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>Implement extensions</td>
                <td><span class="badge bg-dark-subtle text-body">Backlog</span></td>
                <td>Maritza Blanda</td>
            </tr>
            <tr>
                <th scope="row">5</th>
                <td>Applications Engineer</td><td>
                <span class="badge bg-success-subtle text-success">Done</span></td>
                <td>Leslie Alexander</td>
            </tr>
        </tbody>
    </table>

#### Table Head

Show Code

Use `table-light` or `table-dark` class to create <thead> appear light or dark.

Student | Course | Author | Payment | Process | Status
--- | --- | --- | --- | --- | ---
Milana Scot | UI/UX design | Mitchell Flores | $450 |  | Confirmed
Jassica Welsh | 3d Animation | Dan Evgeni | $860 |  | Waiting
Leslie Alexander | Logotype Design | Olimpia Jordan | $450 |  | Waiting

    <!-- Table Head -->
    <table class="table align-middle table-nowrap mb-0">
        <thead class="table-light">
            <tr>
                <th scope="col">Student</th>
                <th scope="col">Course</th>
                <th scope="col">Author</th>
                <th scope="col">Payment</th>
                <th scope="col">Process</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Milana Scot</td>
                <td>UI/UX design</td>
                <td>Mitchell Flores</td>
                <td>$450</td>
                <td>
                    <div class="progress progress-sm">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </td>
                <td><a href="javascript:void(0);" class="link-success">Confirmed</a></td>
            </tr>
            <tr>
                <td>Jassica Welsh</td>
                <td>3d Animation</td>
                <td>Dan Evgeni</td>
                <td>$860</td>
                <td>
                    <div class="progress progress-sm">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </td>
                <td><a href="javascript:void(0);" class="link-warning">Waiting</a></td>
            </tr>
            <tr>
                <td>Leslie Alexander</td>
                <td>Logotype Design</td>
                <td>Olimpia Jordan</td>
                <td>$450</td>
                <td>
                    <div class="progress progress-sm">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </td>
                <td><a href="javascript:void(0);" class="link-warning">Waiting</a></td>
            </tr>
        </tbody>
    </table>

#### Table Foot

Show Code

Add `<tbody>` attribute to group footer content in an HTML table.

ID | Name | Job Title | Date | Payment
--- | --- | --- | --- | ---
01 | Annette Black | Industrial Designer | 10, Nov 2021 | $450
02 | Bessie Cooper | Graphic Designer | 13, Nov 2021 | $875
03 | Leslie Alexander | Product Manager | 17, Nov 2021 | $410
Total | $940

    <!-- Table Foot -->
    <table class="table table-nowrap">
        <thead class="table-light ">
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Name</th>
                <th scope="col">Job Title</th>
                <th scope="col">Date</th>
                <th scope="col">Payment</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Annette Black</td>
                <td>Industrial Designer</td>
                <td>10, Nov 2021</td>
                <td>$450</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Bessie Cooper</td>
                <td>Graphic Designer</td>
                <td>13, Nov 2021</td>
                <td>$875</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Leslie Alexander</td>
                <td>Product Manager</td>
                <td>17, Nov 2021</td>
                <td>$410</td>
            </tr>
        </tbody>
        <tfoot class="table-light">
            <tr>
                <td colspan="4">Total</td>
                <td>$940</td>
            </tr>
        </tfoot>
    </table>

#### Captions

Show Code

You can also put the `<caption>` attribute on the top of the table with `caption-top` class.

List of users
ID | Student | Course | Author
--- | --- | --- | ---
01 | Milana Scot | UI/UX design | Mitchell Flores
02 | Jassica Welsh | 3d Animation | Dan Evgeni
03 | Leslie Alexander | Logotype Design | Olimpia Jordan

    <!-- Captions -->
    <table class="table caption-top table-nowrap">
        <thead class="table-light">
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Name</th>
                <th scope="col">Job Title</th>
                <th scope="col">Date</th>
                <th scope="col">Payment</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Annette Black</td>
                <td>Industrial Designer</td>
                <td>10, Nov 2021</td>
                <td>$450</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Bessie Cooper</td>
                <td>Graphic Designer</td>
                <td>13, Nov 2021</td>
                <td>$875</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Leslie Alexander</td>
                <td>Product Manager</td>
                <td>17, Nov 2021</td>
                <td>$410</td>
            </tr>
        </tbody>
        <tfoot class="table-light">
            <tr>
                <td colspan="4">Total</td>
                <td>$940</td>
            </tr>
        </tfoot>
    </table>

#### Table Nesting

Show Code

Example of basic table nesting. Border styles, active styles, and table variants are not inherited by nested tables.

ID | Name | Job Title | Date | Payment
--- | --- | --- | --- | ---
01 | Annette Black | Industrial Designer | 10, Nov 2021 | $450

ID | Student | Course | Author
--- | --- | --- | ---
I | Milana Scot | 3d Animation | James Black
II | Juston Eichmann | Design syntax | Olimpia Jordan

02 | Bessie Cooper | Graphic Designer | 13, Nov 2021 | $875
03 | Leslie Alexander | Product Manager | 16, Nov 2021 | $410
04 | Bettie Johson | Applications Engineer | 24, Nov 2021 | $620
05 | Monkey Karry | Implement new UX | 25, Nov 2021 | $795

    <!-- Table Nesting -->
    <table class="table table-nowrap">
        <thead class="table-light">
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Job Title</th>
                <th scope="col">Date</th>
                <th scope="col">Payment</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Annette Black</td>
                <td>Industrial Designer</td>
                <td>10, Nov 2021</td>
                <td>$450</td>
            </tr>
            <tr>
                <td colspan="5">
                    <table class="table table-nowrap mb-0">
                        <thead class="table-light">
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Student</th>
                                <th scope="col">Course</th>
                                <th scope="col">Author</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">1</th>
                                <td>Milana Scot</td>
                                <td>3d Animation</td>
                                <td>James Black</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Juston Eichmann</td>
                                <td>Design syntax</td>
                                <td>Olimpia Jordan</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Bessie Cooper</td>
                <td>Graphic Designer</td>
                <td>13, Nov 2021</td>
                <td>$875</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Leslie Alexander</td>
                <td>Product Manager</td>
                <td>16, Nov 2021</td>
                <td>$410</td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>Bettie Johson</td>
                <td>Applications Engineer</td>
                <td>24, Nov 2021</td>
                <td>$620</td>
            </tr>
            <tr>
                <th scope="row">5</th>
                <td>Monkey Karry</td>
                <td>Implement new UX</td>
                <td>25, Nov 2021</td>
                <td>$795</td>
            </tr>
        </tbody>
    </table>

#### Variants

Show Code

Use `table-` class with below-mentioned color variation class within <tr> to set color on table row.

# | Name | Position | Department
--- | --- | --- | ---
Default | Monkey Karry | Medical Specialist | Orthopedics
Primary | James White | Medical Assistant | Surgery
Secondary | Aaron James | Medical Specialist | Neurology
Success | Bettie Johson | Medical Specialist | Cardiology
Danger | Bessie Cooper | Medical Assistant | Surgery
Warning | Lenora Sandoval | Medical Assistant | Cardiology
Info | Eric Pierce | Medical Specialist | Neurology
Light | Ruth Zimmermann | Medical Specialist | Neurology
Dark | Leslie Alexander | Medical Assistant | Cardiology

    <!-- Variants -->
    <table class="table table-nowrap">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Position</th>
                <th scope="col">Department</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Default</td>
                <td>Monkey Karry</td>
                <td>Medical Specialist</td>
                <td>Orthopedics</td>
            </tr>
            <tr class="table-primary">
                <td>Primary</td>
                <td>James White</td>
                <td>Medical Assistant</td>
                <td>Surgery</td>
            </tr>
            <tr class="table-secondary">
                <td>Secondary</td>
                <td>Aaron James</td>
                <td>Medical Specialist</td>
                <td>Neurology</td>
            </tr>
            <tr class="table-success">
                <td>Success</td>
                <td>Bettie Johson</td>
                <td>Medical Specialist</td>
                <td>Cardiology</td>
            </tr>
            <tr class="table-danger">
                <td>Danger</td>
                <td>Bessie Cooper</td>
                <td>Medical Assistant</td>
                <td>Surgery</td>
            </tr>
            <tr class="table-warning">
                <td>Warning</td>
                <td>Lenora Sandoval</td>
                <td>Medical Assistant</td>
                <td>Cardiology</td>
            </tr>
            <tr class="table-info">
                <td>Info</td>
                <td>Eric Pierce</td>
                <td>Medical Specialist</td>
                <td>Neurology</td>
            </tr>
            <tr class="table-light">
                <td>Light</td>
                <td>Ruth Zimmermann</td>
                <td>Medical Specialist</td>
                <td>Neurology</td>
            </tr>
            <tr class="table-dark">
                <td>Dark</td>
                <td>Leslie Alexander</td>
                <td>Medical Assistant</td>
                <td>Cardiology</td>
            </tr>
        </tbody>
    </table>

#### Vertical alignment

Show Code

Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the the top by default. Use the vertical align classes to re-align where needed.

Heading | Heading | Heading | Heading
--- | --- | --- | ---
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. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.
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. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.
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. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.

    <!-- Vertical alignment -->
    <div class="table-responsive">
        <table class="table align-middle">
            <thead>
                <tr>
                    ...
                </tr>
            </thead>
            <tbody>
                <tr>
                    ...
                </tr>
                <tr class="align-bottom">
                    ...
                </tr>
                <tr>
                    <td>...</td>
                    <td>...</td>
                    <td class="align-top">This cell is aligned to the top.</td>
                    <td>...</td>
                </tr>
            </tbody>
        </table>
    </div>

#### Responsive Tables

Show Code

Use `table-responsive` class to make any table responsive across all viewports. Responsive tables allow tables to be scrolled horizontally with ease.

| ID | Date | Status | Customer | Purchased | Revenue
--- | --- | --- | --- | --- | --- | ---
| #VZ2110 | 10 Oct, 14:47 | Paid | Jordan Kennedy | Mastering the grid | $9.98
| #VZ2109 | 17 Oct, 02:10 | Paid | Jackson Graham | Splashify | $270.60
| #VZ2108 | 26 Oct, 08:20 | Refunded | Lauren Trujillo | Wireframing Kit for Figma | $145.42
| #VZ2107 | 02 Nov, 04:52 | Cancel | Curtis Weaver | Wireframing Kit for Figma | $170.68
| #VZ2106 | 10 Nov, 07:20 | Paid | Jason schuller | Splashify | $350.87
Total | $947.55

    <div class="table-responsive">
        <table class="table align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th scope="col">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="responsivetableCheck">
                            <label class="form-check-label" for="responsivetableCheck"></label>
                        </div>
                    </th>
                    <th scope="col">#</th>
                    <th scope="col">Date</th>
                    <th scope="col">Status</th>
                    <th scope="col">Customer</th>
                    <th scope="col">Purchased</th>
                    <th scope="col">Revenue</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="responsivetableCheck01">
                            <label class="form-check-label" for="responsivetableCheck01"></label>
                        </div>
                    </th>
                    <td><a href="#" class="fw-semibold">#VZ2110</a></td>
                    <td>10 Oct, 14:47</td>
                    <td class="text-success"><i class="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
                    <td>
                        <div class="d-flex gap-2 align-items-center">
                            <div class="flex-shrink-0">
                                <img src="assets/images/users/avatar-3.jpg" alt="" class="avatar-xs rounded-circle" />
                            </div>
                            <div class="flex-grow-1">
                                Jordan Kennedy
                            </div>
                        </div>
                    </td>
                    <td>Mastering the grid</td>
                    <td>$9.98</td>
                </tr>
                <tr>
                    <th scope="row">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="responsivetableCheck02">
                            <label class="form-check-label" for="responsivetableCheck02"></label>
                        </div>
                    </th>
                    <td><a href="#" class="fw-semibold">#VZ2109</a></td>
                    <td>17 Oct, 02:10</td>
                    <td class="text-success"><i class="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
                    <td>
                        <div class="d-flex gap-2 align-items-center">
                            <div class="flex-shrink-0">
                                <img src="assets/images/users/avatar-4.jpg" alt="" class="avatar-xs rounded-circle" />
                            </div>
                            <div class="flex-grow-1">
                                Jackson Graham
                            </div>
                        </div>
                    </td>
                    <td>Splashify</td>
                    <td>$270.60</td>
                </tr>
                <tr>
                    <th scope="row">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="responsivetableCheck03">
                            <label class="form-check-label" for="responsivetableCheck03"></label>
                        </div>
                    </th>
                    <td><a href="#" class="fw-semibold">#VZ2108</a></td>
                    <td>26 Oct, 08:20</td>
                    <td class="text-primary"><i class="ri-refresh-line fs-17 align-middle"></i> Refunded</td>
                    <td>
                        <div class="d-flex gap-2 align-items-center">
                            <div class="flex-shrink-0">
                                <img src="assets/images/users/avatar-5.jpg" alt="" class="avatar-xs rounded-circle" />
                            </div>
                            <div class="flex-grow-1">
                                Lauren Trujillo
                            </div>
                        </div>
                    </td>
                    <td>Wireframing Kit for Figma</td>
                    <td>$145.42</td>
                </tr>
                <tr>
                    <th scope="row">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="responsivetableCheck04">
                            <label class="form-check-label" for="responsivetableCheck04"></label>
                        </div>
                    </th>
                    <td><a href="#" class="fw-semibold">#VZ2107</a></td>
                    <td>02 Nov, 04:52</td>
                    <td class="text-danger"><i class="ri-close-circle-line fs-17 align-middle"></i> Cancel</td>
                    <td>
                        <div class="d-flex gap-2 align-items-center">
                            <div class="flex-shrink-0">
                                <img src="assets/images/users/avatar-6.jpg" alt="" class="avatar-xs rounded-circle" />
                            </div>
                            <div class="flex-grow-1">
                                Curtis Weaver
                            </div>
                        </div>
                    </td>
                    <td>Wireframing Kit for Figma</td>
                    <td>$170.68</td>
                </tr>
                <tr>
                    <th scope="row">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="responsivetableCheck05">
                            <label class="form-check-label" for="responsivetableCheck05"></label>
                        </div>
                    </th>
                    <td><a href="#" class="fw-semibold">#VZ2106</a></td>
                    <td>10 Nov, 07:20</td>
                    <td class="text-success"><i class="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
                    <td>
                        <div class="d-flex gap-2 align-items-center">
                            <div class="flex-shrink-0">
                                <img src="assets/images/users/avatar-1.jpg" alt="" class="avatar-xs rounded-circle" />
                            </div>
                            <div class="flex-grow-1">
                                Jason schuller
                            </div>
                        </div>
                    </td>
                    <td>Splashify</td>
                    <td>$350.87</td>
                </tr>
            </tbody>
            <tfoot class="table-light">
                <tr>
                    <td colspan="6">Total</td>
                    <td>$947.55</td>
                </tr>
            </tfoot>
        </table>
        <!-- end table -->
    </div>
    <!-- end table responsive -->

Loading...

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

##### Semi Box

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark

###### Background Image

Choose a body background image.

##### None

##### One

##### Two

##### Three