Regular Table

Pages

Users

Kevin Spacey

kevinspacey@left4code.com

Sylvester Stallone

sylvesterstallone@left4code.com

Denzel Washington

denzelwashington@left4code.com

Leonardo DiCaprio

leonardodicaprio@left4code.com

Products

Notifications

Kevin Spacey

01:10 PM

There are many variations of passages of Lorem Ipsum available,but the majority have suffered alteration in some form,by injected humour,or randomi

Sylvester Stallone

05:09 AM

There are many variations of passages of Lorem Ipsum available,but the majority have suffered alteration in some form,by injected humour,or randomi

Denzel Washington

05:09 AM

There are many variations of passages of Lorem Ipsum available,but the majority have suffered alteration in some form,by injected humour,or randomi

Leonardo DiCaprio

01:10 PM

Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 20

Robert De Niro

03:20 PM

Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 20

Basic Table

Show code

#	First Name	Last Name	Username
1	Angelina	Jolie	@angelinajolie
2	Brad	Pitt	@bradpitt
3	Charlie	Hunnam	@charliehunnam

#	First Name	Last Name	Username
1	Angelina	Jolie	@angelinajolie
2	Brad	Pitt	@bradpitt
3	Charlie	Hunnam	@charliehunnam

                                        <div class="overflow-x-auto">
    <table class="table">
        <thead>
            <tr>
                <th class="border-b-2 whitespace-no-wrap">#</th>
                <th class="border-b-2 whitespace-no-wrap">First Name</th>
                <th class="border-b-2 whitespace-no-wrap">Last Name</th>
                <th class="border-b-2 whitespace-no-wrap">Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="border-b">1</td>
                <td class="border-b">Angelina</td>
                <td class="border-b">Jolie</td>
                <td class="border-b">@angelinajolie</td>
            </tr>
            <tr>
                <td class="border-b">2</td>
                <td class="border-b">Brad</td>
                <td class="border-b">Pitt</td>
                <td class="border-b">@bradpitt</td>
            </tr>
            <tr>
                <td class="border-b">3</td>
                <td class="border-b">Charlie</td>
                <td class="border-b">Hunnam</td>
                <td class="border-b">@charliehunnam</td>
            </tr>
        </tbody>
    </table>
    <table class="table mt-5">
        <thead>
            <tr class="bg-gray-700 text-white">
                <th class="border-b-2 border-gray-600 whitespace-no-wrap">#</th>
                <th class="border-b-2 border-gray-600 whitespace-no-wrap">First Name</th>
                <th class="border-b-2 border-gray-600 whitespace-no-wrap">Last Name</th>
                <th class="border-b-2 border-gray-600 whitespace-no-wrap">Username</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-gray-700 text-white">
                <td class="border-b border-gray-600">1</td>
                <td class="border-b border-gray-600">Angelina</td>
                <td class="border-b border-gray-600">Jolie</td>
                <td class="border-b border-gray-600">@angelinajolie</td>
            </tr>
            <tr class="bg-gray-700 text-white">
                <td class="border-b border-gray-600">2</td>
                <td class="border-b border-gray-600">Brad</td>
                <td class="border-b border-gray-600">Pitt</td>
                <td class="border-b border-gray-600">@bradpitt</td>
            </tr>
            <tr class="bg-gray-700 text-white">
                <td class="border-b border-gray-600">3</td>
                <td class="border-b border-gray-600">Charlie</td>
                <td class="border-b border-gray-600">Hunnam</td>
                <td class="border-b border-gray-600">@charliehunnam</td>
            </tr>
        </tbody>
    </table>
</div>
                                    

Bordered Table

Show code

#	First Name	Last Name	Username
1	Angelina	Jolie	@angelinajolie
2	Brad	Pitt	@bradpitt
3	Charlie	Hunnam	@charliehunnam

                                        <div class="overflow-x-auto">
    <table class="table">
        <thead>
            <tr>
                <th class="border border-b-2 whitespace-no-wrap">#</th>
                <th class="border border-b-2 whitespace-no-wrap">First Name</th>
                <th class="border border-b-2 whitespace-no-wrap">Last Name</th>
                <th class="border border-b-2 whitespace-no-wrap">Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="border">1</td>
                <td class="border">Angelina</td>
                <td class="border">Jolie</td>
                <td class="border">@angelinajolie</td>
            </tr>
            <tr>
                <td class="border">2</td>
                <td class="border">Brad</td>
                <td class="border">Pitt</td>
                <td class="border">@bradpitt</td>
            </tr>
            <tr>
                <td class="border">3</td>
                <td class="border">Charlie</td>
                <td class="border">Hunnam</td>
                <td class="border">@charliehunnam</td>
            </tr>
        </tbody>
    </table>
</div>
                                    

Hoverable Table

Show code

#	First Name	Last Name	Username
1	Angelina	Jolie	@angelinajolie
2	Brad	Pitt	@bradpitt
3	Charlie	Hunnam	@charliehunnam

                                        <div class="overflow-x-auto">
    <table class="table">
        <thead>
            <tr>
                <th class="border border-b-2 whitespace-no-wrap">#</th>
                <th class="border border-b-2 whitespace-no-wrap">First Name</th>
                <th class="border border-b-2 whitespace-no-wrap">Last Name</th>
                <th class="border border-b-2 whitespace-no-wrap">Username</th>
            </tr>
        </thead>
        <tbody>
            <tr class="hover:bg-gray-200">
                <td class="border">1</td>
                <td class="border">Angelina</td>
                <td class="border">Jolie</td>
                <td class="border">@angelinajolie</td>
            </tr>
            <tr class="hover:bg-gray-200">
                <td class="border">2</td>
                <td class="border">Brad</td>
                <td class="border">Pitt</td>
                <td class="border">@bradpitt</td>
            </tr>
            <tr class="hover:bg-gray-200">
                <td class="border">3</td>
                <td class="border">Charlie</td>
                <td class="border">Hunnam</td>
                <td class="border">@charliehunnam</td>
            </tr>
        </tbody>
    </table>
</div>
                                    

Table Row States

Show code

#	First Name	Last Name	Username
1	Angelina	Jolie	@angelinajolie
2	Brad	Pitt	@bradpitt
3	Charlie	Hunnam	@charliehunnam

                                        <div class="overflow-x-auto">
    <table class="table">
        <thead>
            <tr>
                <th class="border-b-2 whitespace-no-wrap">#</th>
                <th class="border-b-2 whitespace-no-wrap">First Name</th>
                <th class="border-b-2 whitespace-no-wrap">Last Name</th>
                <th class="border-b-2 whitespace-no-wrap">Username</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-theme-1 text-white">
                <td class="border-b">1</td>
                <td class="border-b">Angelina</td>
                <td class="border-b">Jolie</td>
                <td class="border-b">@angelinajolie</td>
            </tr>
            <tr class="bg-theme-6 text-white">
                <td class="border-b">2</td>
                <td class="border-b">Brad</td>
                <td class="border-b">Pitt</td>
                <td class="border-b">@bradpitt</td>
            </tr>
            <tr class="bg-theme-11 text-white">
                <td class="border-b">3</td>
                <td class="border-b">Charlie</td>
                <td class="border-b">Hunnam</td>
                <td class="border-b">@charliehunnam</td>
            </tr>
        </tbody>
    </table>
</div>
                                    

Table Head Options

Show code

#	First Name	Last Name	Username
1	Angelina	Jolie	@angelinajolie
2	Brad	Pitt	@bradpitt
3	Charlie	Hunnam	@charliehunnam

#	First Name	Last Name	Username
1	Angelina	Jolie	@angelinajolie
2	Brad	Pitt	@bradpitt
3	Charlie	Hunnam	@charliehunnam

                                        <div class="overflow-x-auto">
    <table class="table">
        <thead>
            <tr class="bg-gray-700 text-white">
                <th class="whitespace-no-wrap">#</th>
                <th class="whitespace-no-wrap">First Name</th>
                <th class="whitespace-no-wrap">Last Name</th>
                <th class="whitespace-no-wrap">Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="border-b">1</td>
                <td class="border-b">Angelina</td>
                <td class="border-b">Jolie</td>
                <td class="border-b">@angelinajolie</td>
            </tr>
            <tr>
                <td class="border-b">2</td>
                <td class="border-b">Brad</td>
                <td class="border-b">Pitt</td>
                <td class="border-b">@bradpitt</td>
            </tr>
            <tr>
                <td class="border-b">3</td>
                <td class="border-b">Charlie</td>
                <td class="border-b">Hunnam</td>
                <td class="border-b">@charliehunnam</td>
            </tr>
        </tbody>
    </table>
    <table class="table mt-5">
        <thead>
            <tr class="bg-gray-200 text-gray-700">
                <th class="whitespace-no-wrap">#</th>
                <th class="whitespace-no-wrap">First Name</th>
                <th class="whitespace-no-wrap">Last Name</th>
                <th class="whitespace-no-wrap">Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="border-b">1</td>
                <td class="border-b">Angelina</td>
                <td class="border-b">Jolie</td>
                <td class="border-b">@angelinajolie</td>
            </tr>
            <tr>
                <td class="border-b">2</td>
                <td class="border-b">Brad</td>
                <td class="border-b">Pitt</td>
                <td class="border-b">@bradpitt</td>
            </tr>
            <tr>
                <td class="border-b">3</td>
                <td class="border-b">Charlie</td>
                <td class="border-b">Hunnam</td>
                <td class="border-b">@charliehunnam</td>
            </tr>
        </tbody>
    </table>
</div>
                                    

Responsive Table

Show code

#	First Name	Last Name	Username	Email	Address
1	Angelina	Jolie	@angelinajolie	angelinajolie@gmail.com	260 W. Storm Street New York,NY 10025.
2	Brad	Pitt	@bradpitt	bradpitt@gmail.com	47 Division St. Buffalo,NY 14241.
3	Charlie	Hunnam	@charliehunnam	charliehunnam@gmail.com	8023 Amerige Street Harriman,NY 10926.

                                        <div class="overflow-x-auto">
    <table class="table">
        <thead>
            <tr>
                <th class="border-b-2 whitespace-no-wrap">#</th>
                <th class="border-b-2 whitespace-no-wrap">First Name</th>
                <th class="border-b-2 whitespace-no-wrap">Last Name</th>
                <th class="border-b-2 whitespace-no-wrap">Username</th>
                <th class="border-b-2 whitespace-no-wrap">Email</th>
                <th class="border-b-2 whitespace-no-wrap">Address</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="border-b whitespace-no-wrap">1</td>
                <td class="border-b whitespace-no-wrap">Angelina</td>
                <td class="border-b whitespace-no-wrap">Jolie</td>
                <td class="border-b whitespace-no-wrap">@angelinajolie</td>
                <td class="border-b whitespace-no-wrap">angelinajolie@gmail.com</td>
                <td class="border-b whitespace-no-wrap">260 W. Storm Street New York,NY 10025.</td>
            </tr>
            <tr>
                <td class="border-b whitespace-no-wrap">2</td>
                <td class="border-b whitespace-no-wrap">Brad</td>
                <td class="border-b whitespace-no-wrap">Pitt</td>
                <td class="border-b whitespace-no-wrap">@bradpitt</td>
                <td class="border-b whitespace-no-wrap">bradpitt@gmail.com</td>
                <td class="border-b whitespace-no-wrap">47 Division St. Buffalo,NY 14241.</td>
            </tr>
            <tr>
                <td class="border-b whitespace-no-wrap">3</td>
                <td class="border-b whitespace-no-wrap">Charlie</td>
                <td class="border-b whitespace-no-wrap">Hunnam</td>
                <td class="border-b whitespace-no-wrap">@charliehunnam</td>
                <td class="border-b whitespace-no-wrap">charliehunnam@gmail.com</td>
                <td class="border-b whitespace-no-wrap">8023 Amerige Street Harriman,NY 10926.</td>
            </tr>
        </tbody>
    </table>
</div>
                                    

Small Table

Show code

#	First Name	Last Name	Username
1	Angelina	Jolie	@angelinajolie
2	Brad	Pitt	@bradpitt
3	Charlie	Hunnam	@charliehunnam

                                        <div class="overflow-x-auto">
    <table class="table table--sm">
        <thead>
            <tr>
                <th class="border-b-2 whitespace-no-wrap">#</th>
                <th class="border-b-2 whitespace-no-wrap">First Name</th>
                <th class="border-b-2 whitespace-no-wrap">Last Name</th>
                <th class="border-b-2 whitespace-no-wrap">Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="border-b">1</td>
                <td class="border-b">Angelina</td>
                <td class="border-b">Jolie</td>
                <td class="border-b">@angelinajolie</td>
            </tr>
            <tr>
                <td class="border-b">2</td>
                <td class="border-b">Brad</td>
                <td class="border-b">Pitt</td>
                <td class="border-b">@bradpitt</td>
            </tr>
            <tr>
                <td class="border-b">3</td>
                <td class="border-b">Charlie</td>
                <td class="border-b">Hunnam</td>
                <td class="border-b">@charliehunnam</td>
            </tr>
        </tbody>
    </table>
</div>
                                    

Striped Rows

Show code

#	First Name	Last Name	Username
1	Angelina	Jolie	@angelinajolie
2	Brad	Pitt	@bradpitt
3	Charlie	Hunnam	@charliehunnam

                                        <div class="overflow-x-auto">
    <table class="table">
        <thead>
            <tr>
                <th class="border-b-2 whitespace-no-wrap">#</th>
                <th class="border-b-2 whitespace-no-wrap">First Name</th>
                <th class="border-b-2 whitespace-no-wrap">Last Name</th>
                <th class="border-b-2 whitespace-no-wrap">Username</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-gray-200">
                <td class="border-b">1</td>
                <td class="border-b">Angelina</td>
                <td class="border-b">Jolie</td>
                <td class="border-b">@angelinajolie</td>
            </tr>
            <tr>
                <td class="border-b">2</td>
                <td class="border-b">Brad</td>
                <td class="border-b">Pitt</td>
                <td class="border-b">@bradpitt</td>
            </tr>
            <tr class="bg-gray-200">
                <td class="border-b">3</td>
                <td class="border-b">Charlie</td>
                <td class="border-b">Hunnam</td>
                <td class="border-b">@charliehunnam</td>
            </tr>
        </tbody>
    </table>
</div>
                                    