Main Menu
Boost your work

Upgrade to premium here

Upgrade Now
Kleon Admin Dashboard
Made with by WPThemeBooster
Theme Customizer
Theme Color Mode
Navigation Layout
Vertical Navigation Styles
Header Position
Topbar Style

Basic Flex Tables

Lorem ipsum dolor sit amet

Default Table
#
Name
Designation
Company
Phone
1
Tonny
CEO
ABC
+098 234 567
2
Farguson
Manager
XYZ
+098 234 568
3
Ashley
Marketer
Abco
+098 234 569
4
Jackie
Marketer
Abco
+098 234 570
<!-- Default Table -->
    <div class="table table-flex">
    <div class="thead fw-bold border-bottom border-1 border-light-200">
        <div class="row px-2">
            <div class="col">#</div>
            <div class="col">Name</div>
            <div class="col">Designation</div>
            <div class="col">Company</div>
            <div class="col">Phone</div>
        </div>
    </div>

    <div class="tbody">
        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">1</div>
            <div class="col">Tonny</div>
            <div class="col">CEO</div>
            <div class="col">ABC</div>
            <div class="col">+098 234 567</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">2</div>
            <div class="col">Farguson</div>
            <div class="col">Manager</div>
            <div class="col">XYZ</div>
            <div class="col">+098 234 568</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">3</div>
            <div class="col">Ashley</div>
            <div class="col">Marketer</div>
            <div class="col">Abco</div>
            <div class="col">+098 234 569</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">4</div>
            <div class="col">Jackie</div>
            <div class="col">Marketer</div>
            <div class="col">Abco</div>
            <div class="col">+098 234 570</div>
        </div>
    </div>
</div>
Dark Table
#
Name
Designation
Company
Phone
1
Tonny
CEO
ABC
+098 234 567
2
Farguson
Manager
XYZ
+098 234 568
3
Ashley
Marketer
Abco
+098 234 569
4
Jackie
Marketer
Abco
+098 234 570
<!-- Dark Table -->
    <div class="table table-flex table-dark">
    <div class="thead fw-bold border-bottom border-1 border-light-200">
        <div class="row px-2">
            <div class="col">#</div>
            <div class="col">Name</div>
            <div class="col">Designation</div>
            <div class="col">Company</div>
            <div class="col">Phone</div>
        </div>
    </div>

    <div class="tbody">
        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">1</div>
            <div class="col">Tonny</div>
            <div class="col">CEO</div>
            <div class="col">ABC</div>
            <div class="col">+098 234 567</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">2</div>
            <div class="col">Farguson</div>
            <div class="col">Manager</div>
            <div class="col">XYZ</div>
            <div class="col">+098 234 568</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">3</div>
            <div class="col">Ashley</div>
            <div class="col">Marketer</div>
            <div class="col">Abco</div>
            <div class="col">+098 234 569</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">4</div>
            <div class="col">Jackie</div>
            <div class="col">Marketer</div>
            <div class="col">Abco</div>
            <div class="col">+098 234 570</div>
        </div>
    </div>
</div>
Striped Table
#
Name
Designation
Company
Phone
1
Tonny
CEO
ABC
+098 234 567
2
Farguson
Manager
XYZ
+098 234 568
3
Ashley
Marketer
Abco
+098 234 569
4
Jackie
Marketer
Abco
+098 234 570
#
Name
Designation
Company
Phone
1
Tonny
CEO
ABC
+098 234 567
2
Farguson
Manager
XYZ
+098 234 568
3
Ashley
Marketer
Abco
+098 234 569
4
Jackie
Marketer
Abco
+098 234 570
<!-- Striped Table -->
    <div class="table table-flex table-light table-striped">
    <div class="thead fw-bold border-bottom border-1 border-light-200">
        <div class="row px-2">
            <div class="col">#</div>
            <div class="col">Name</div>
            <div class="col">Designation</div>
            <div class="col">Company</div>
            <div class="col">Phone</div>
        </div>
    </div>

    <div class="tbody">
        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">1</div>
            <div class="col">Tonny</div>
            <div class="col">CEO</div>
            <div class="col">ABC</div>
            <div class="col">+098 234 567</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">2</div>
            <div class="col">Farguson</div>
            <div class="col">Manager</div>
            <div class="col">XYZ</div>
            <div class="col">+098 234 568</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">3</div>
            <div class="col">Ashley</div>
            <div class="col">Marketer</div>
            <div class="col">Abco</div>
            <div class="col">+098 234 569</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">4</div>
            <div class="col">Jackie</div>
            <div class="col">Marketer</div>
            <div class="col">Abco</div>
            <div class="col">+098 234 570</div>
        </div>
    </div>
</div>

<div class="table table-flex table-dark table-striped">
    <div class="thead fw-bold border-bottom border-1 border-light-200">
        <div class="row px-2">
            <div class="col">#</div>
            <div class="col">Name</div>
            <div class="col">Designation</div>
            <div class="col">Company</div>
            <div class="col">Phone</div>
        </div>
    </div>

    <div class="tbody">
        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">1</div>
            <div class="col">Tonny</div>
            <div class="col">CEO</div>
            <div class="col">ABC</div>
            <div class="col">+098 234 567</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">2</div>
            <div class="col">Farguson</div>
            <div class="col">Manager</div>
            <div class="col">XYZ</div>
            <div class="col">+098 234 568</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">3</div>
            <div class="col">Ashley</div>
            <div class="col">Marketer</div>
            <div class="col">Abco</div>
            <div class="col">+098 234 569</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">4</div>
            <div class="col">Jackie</div>
            <div class="col">Marketer</div>
            <div class="col">Abco</div>
            <div class="col">+098 234 570</div>
        </div>
    </div>
</div>
Bordered Table
#
Name
Designation
Company
Phone
1
Tonny
CEO
ABC
+098 234 567
2
Farguson
Manager
XYZ
+098 234 568
3
Ashley
Marketer
Abco
+098 234 569
4
Jackie
Marketer
Abco
+098 234 570
#
Name
Designation
Company
Phone
1
Tonny
CEO
ABC
+098 234 567
2
Farguson
Manager
XYZ
+098 234 568
3
Ashley
Marketer
Abco
+098 234 569
4
Jackie
Marketer
Abco
+098 234 570
<!-- Bordered Table -->
<div class="table table-flex table-light table-striped table-bordered">
    <div class="thead fw-bold">
        <div class="row px-2">
            <div class="col border border-1 border-light-200">#</div>
            <div class="col border border-1 border-light-200">Name</div>
            <div class="col border border-1 border-light-200">Designation</div>
            <div class="col border border-1 border-light-200">Company</div>
            <div class="col border border-1 border-light-200">Phone</div>
        </div>
    </div>

    <div class="tbody">
        <div class="row px-2">
            <div class="col border border-1 border-light-200">1</div>
            <div class="col border border-1 border-light-200">Tonny</div>
            <div class="col border border-1 border-light-200">CEO</div>
            <div class="col border border-1 border-light-200">ABC</div>
            <div class="col border border-1 border-light-200">+098 234 567</div>
        </div>

        <div class="row px-2">
            <div class="col border border-1 border-light-200">2</div>
            <div class="col border border-1 border-light-200">Farguson</div>
            <div class="col border border-1 border-light-200">Manager</div>
            <div class="col border border-1 border-light-200">XYZ</div>
            <div class="col border border-1 border-light-200">+098 234 568</div>
        </div>

        <div class="row px-2">
            <div class="col border border-1 border-light-200">3</div>
            <div class="col border border-1 border-light-200">Ashley</div>
            <div class="col border border-1 border-light-200">Marketer</div>
            <div class="col border border-1 border-light-200">Abco</div>
            <div class="col border border-1 border-light-200">+098 234 569</div>
        </div>

        <div class="row px-2">
            <div class="col border border-1 border-light-200">4</div>
            <div class="col border border-1 border-light-200">Jackie</div>
            <div class="col border border-1 border-light-200">Marketer</div>
            <div class="col border border-1 border-light-200">Abco</div>
            <div class="col border border-1 border-light-200">+098 234 570</div>
        </div>
    </div>
</div>
Variants Tables
#
Name
Designation
Company
Phone
1
Tonny
CEO
ABC
+098 234 567
2
Farguson
Manager
XYZ
+098 234 568
3
Ashley
Marketer
Abco
+098 234 569
4
Jackie
Marketer
Abco
+098 234 570
#
Name
Designation
Company
Phone
1
Tonny
CEO
ABC
+098 234 567
2
Farguson
Manager
XYZ
+098 234 568
3
Ashley
Marketer
Abco
+098 234 569
4
Jackie
Marketer
Abco
+098 234 570
#
Name
Designation
Company
Phone
1
Tonny
CEO
ABC
+098 234 567
2
Farguson
Manager
XYZ
+098 234 568
3
Ashley
Marketer
Abco
+098 234 569
4
Jackie
Marketer
Abco
+098 234 570
#
Name
Designation
Company
Phone
1
Tonny
CEO
ABC
+098 234 567
2
Farguson
Manager
XYZ
+098 234 568
3
Ashley
Marketer
Abco
+098 234 569
4
Jackie
Marketer
Abco
+098 234 570
#
Name
Designation
Company
Phone
1
Tonny
CEO
ABC
+098 234 567
2
Farguson
Manager
XYZ
+098 234 568
3
Ashley
Marketer
Abco
+098 234 569
4
Jackie
Marketer
Abco
+098 234 570
#
Name
Designation
Company
Phone
1
Tonny
CEO
ABC
+098 234 567
2
Farguson
Manager
XYZ
+098 234 568
3
Ashley
Marketer
Abco
+098 234 569
4
Jackie
Marketer
Abco
+098 234 570
On Rows
#
Name
Designation
Company
Phone
1
Tonny
CEO
ABC
+098 234 567
2
Farguson
Manager
XYZ
+098 234 568
3
Ashley
Marketer
Abco
+098 234 569
4
Jackie
Marketer
Abco
+098 234 570
<!-- Variants Tables -->
    <div class="table table-flex table-danger table-striped">
    <div class="thead fw-bold border-bottom border-1 border-light-200">
        <div class="row px-2">
            <div class="col">#</div>
            <div class="col">Name</div>
            <div class="col">Designation</div>
            <div class="col">Company</div>
            <div class="col">Phone</div>
        </div>
    </div>

    <div class="tbody">
        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">1</div>
            <div class="col">Tonny</div>
            <div class="col">CEO</div>
            <div class="col">ABC</div>
            <div class="col">+098 234 567</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">2</div>
            <div class="col">Farguson</div>
            <div class="col">Manager</div>
            <div class="col">XYZ</div>
            <div class="col">+098 234 568</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">3</div>
            <div class="col">Ashley</div>
            <div class="col">Marketer</div>
            <div class="col">Abco</div>
            <div class="col">+098 234 569</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200">
            <div class="col">4</div>
            <div class="col">Jackie</div>
            <div class="col">Marketer</div>
            <div class="col">Abco</div>
            <div class="col">+098 234 570</div>
        </div>
    </div>
</div>

<h5 class="text-warning mt-4">On Rows</h5>
<div class="table table-flex table-striped">
    <div class="thead fw-bold border-bottom border-1 border-light-200">
        <div class="row px-2 table-primary">
            <div class="col">#</div>
            <div class="col">Name</div>
            <div class="col">Designation</div>
            <div class="col">Company</div>
            <div class="col">Phone</div>
        </div>
    </div>

    <div class="tbody">
        <div class="row px-2 border-bottom border-1 border-light-200 table-secondary">
            <div class="col">1</div>
            <div class="col">Tonny</div>
            <div class="col">CEO</div>
            <div class="col">ABC</div>
            <div class="col">+098 234 567</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200 table-info">
            <div class="col">2</div>
            <div class="col">Farguson</div>
            <div class="col">Manager</div>
            <div class="col">XYZ</div>
            <div class="col">+098 234 568</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200 table-warning">
            <div class="col">3</div>
            <div class="col">Ashley</div>
            <div class="col">Marketer</div>
            <div class="col">Abco</div>
            <div class="col">+098 234 569</div>
        </div>

        <div class="row px-2 border-bottom border-1 border-light-200 table-danger">
            <div class="col">4</div>
            <div class="col">Jackie</div>
            <div class="col">Marketer</div>
            <div class="col">Abco</div>
            <div class="col">+098 234 570</div>
        </div>
    </div>
</div>