Table components

Documentation and examples for opt-in styling of tables in the ZedAdmin and TailwindCSS.

Default table
Using the most basic table markup, here’s how .table-based tables look in Bootstrap.
# First Name Last Name Username
1 Mehrab HP @mehrab_xyz
2 John Doe @johndoe 
 <div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mehrab</td>
                <td>HP</td>
                <td>@mehrab_xyz</td>
            </tr>
            <tr>
                <td>2</td>
                <td>John</td>
                <td>Doe</td>
                <td>@johndoe</td>
            </tr>
        </tbody>
    </table>
</div>
Striped rows
Add .table-striped to table element will result in zebra-striping to any table row within the <tbody>.
# First Name Last Name Username
1 Mehrab HP @mehrab_xyz
2 John Doe @johndoe
3 Elon Musk @elonmusk
4 Steve Jobs RIP 🖤 
 <div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mehrab</td>
                <td>HP</td>
                <td>@mehrab_xyz</td>
            </tr>
            <tr>
                <td>2</td>
                <td>John</td>
                <td>Doe</td>
                <td>@johndoe</td>
            </tr>
        </tbody>
    </table>
</div>
Hoverable rows
Add .table-hover to enable a hover state on table rows within a <tbody>.
# First Name Last Name Username
1 Mehrab HP @mehrab_xyz
2 John Doe @johndoe
3 Elon Musk @elonmusk
4 Steve Jobs RIP 🖤 
 <div class="table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mehrab</td>
                <td>HP</td>
                <td>@mehrab_xyz</td>
            </tr>
            <tr>
                <td>2</td>
                <td>John</td>
                <td>Doe</td>
                <td>@johndoe</td>
            </tr>
        </tbody>
    </table>
</div>