Table Default

  1. Home
  2. Tables
  3. Default
ID Name Email Role Status
1 Alice Johnson alice@example.com Admin Active
2 Bob Smith bob@example.com Editor Inactive
3 Carol Lee carol@example.com Viewer Active
4 David Miller david@example.com Editor Pending
5 Emma Brown emma@example.com Admin Active

<div class="overflow-x-auto">
    <table class="table-default whitespace-nowrap border-collapse">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Role</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Alice Johnson</td>
                <td>alice@example.com</td>
                <td>Admin</td>
                <td class="text-green-500">Active</td>
            </tr>
            ....
        </tbody>
    </table>
</div>
Hover
ID Name Email Role Status
1 Alice Johnson alice@example.com Admin Active
2 Bob Smith bob@example.com Editor Inactive
3 Carol Lee carol@example.com Viewer Active
4 David Miller david@example.com Editor Pending
5 Emma Brown emma@example.com Admin Active
Add class to table table-hover
Striped
ID Name Email Role Status
1 Alice Johnson alice@example.com Admin Active
2 Bob Smith bob@example.com Editor Inactive
3 Carol Lee carol@example.com Viewer Active
4 David Miller david@example.com Editor Pending
5 Emma Brown emma@example.com Admin Active
Add class to table table-striped
Compact
ID Name Email Role Status
1 Alice Johnson alice@example.com Admin Active
2 Bob Smith bob@example.com Editor Inactive
3 Carol Lee carol@example.com Viewer Active
4 David Miller david@example.com Editor Pending
5 Emma Brown emma@example.com Admin Active
Add class to table table-compact