Basic Tables

  1. Tables
  2. Basic Tables

Default Table

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

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>

Tables Colors

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

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
02 Premium Plan $1200 Nov 10, 2021 Unsubscribed
03 Basic Plan $860 Nov 19, 2021 Subscribed
04 Corporate Plan $1599 Nov 22, 2021 Subscribed 
<!-- 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

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

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

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 badge-soft-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 badge-soft-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 badge-soft-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 badge-soft-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

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 badge-soft-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 badge-soft-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 badge-soft-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 badge-soft-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

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 badge-soft-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 badge-soft-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 badge-soft-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 badge-soft-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

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 badge-soft-primary">Backlog</span></td>
            <td>Lanora Sandoval</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Design syntax</td>
            <td><span class="badge badge-soft-secondary">In Progress</span></td>
            <td>Calvin Garrett</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Configurable resources</td>
            <td><span class="badge badge-soft-success">Done</span></td>
            <td>Florence Guzman</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Implement extensions</td>
            <td><span class="badge badge-soft-dark">Backlog</span></td>
            <td>Maritza Blanda</td>
        </tr>
        <tr>
            <th scope="row">5</th>
            <td>Applications Engineer</td><td>
            <span class="badge badge-soft-success">Done</span></td>
            <td>Leslie Alexander</td>
        </tr>
    </tbody>
</table>

Table Head

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

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

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

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

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

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

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 -->
© Velzon.
Design & Develop by Themesbrand