Table
Classes Information
| ClassName | Description |
|---|---|
| table | Table base class |
| table-zebra | Will apply a background to odd elements |
| table-hover | Will apply hover efect to each row |
| table-compact | The table will have less pading between each rows |
Basic Usage
| No | Name | Phone | |
|---|---|---|---|
| 5 | Amy Shaw | (586) 461-4374 | sem@aol.com |
| 17 | Kiara Rice | (416) 793-3865 | integer.sem@hotmail.com |
| 19 | Ryan Carlson | (341) 536-4865 | ipsum.donec@yahoo.com |
Example Code
html
<div class="flex w-full overflow-x-auto">
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>5</th>
<td>Amy Shaw</td>
<td>(586) 461-4374</td>
<td>sem@aol.com</td>
</tr>
<tr>
<th>17</th>
<td>Kiara Rice</td>
<td>(416) 793-3865</td>
<td>integer.sem@hotmail.com</td>
</tr>
<tr>
<th>19</th>
<td>Ryan Carlson</td>
<td>(341) 536-4865</td>
<td>ipsum.donec@yahoo.com</td>
</tr>
</tbody>
</table>
</div>Zebra
| No | Name | Phone | |
|---|---|---|---|
| 1 | Kasper Pollard | (683) 593-2687 | lorem.sit.amet@protonmail.edu |
| 2 | Abra Buck | (825) 419-2084 | vitae@outlook.ca |
| 3 | Leilani Preston | 1-835-660-8911 | vitae.mauris.sit@yahoo.edu |
Example Code
html
<div class="flex w-full overflow-x-auto">
<table class="table-zebra table">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kasper Pollard</td>
<td>(683) 593-2687</td>
<td>lorem.sit.amet@protonmail.edu</td>
</tr>
<tr>
<td>2</td>
<td>Abra Buck</td>
<td>(825) 419-2084</td>
<td>vitae@outlook.ca</td>
</tr>
<tr>
<td>3</td>
<td>Leilani Preston</td>
<td>1-835-660-8911</td>
<td>vitae.mauris.sit@yahoo.edu</td>
</tr>
</tbody>
</table>
</div>Hover
| No | Name | Phone | |
|---|---|---|---|
| 1 | Kasper Pollard | (683) 593-2687 | lorem.sit.amet@protonmail.edu |
| 2 | Abra Buck | (825) 419-2084 | vitae@outlook.ca |
| 3 | Leilani Preston | 1-835-660-8911 | vitae.mauris.sit@yahoo.edu |
Example Code
html
<div class="flex w-full overflow-x-auto">
<table class="table-hover table">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kasper Pollard</td>
<td>(683) 593-2687</td>
<td>lorem.sit.amet@protonmail.edu</td>
</tr>
<tr>
<td>2</td>
<td>Abra Buck</td>
<td>(825) 419-2084</td>
<td>vitae@outlook.ca</td>
</tr>
<tr>
<td>3</td>
<td>Leilani Preston</td>
<td>1-835-660-8911</td>
<td>vitae.mauris.sit@yahoo.edu</td>
</tr>
</tbody>
</table>
</div>Compact
| No | Name | Phone | |
|---|---|---|---|
| 1 | Kasper Pollard | (683) 593-2687 | lorem.sit.amet@protonmail.edu |
| 2 | Abra Buck | (825) 419-2084 | vitae@outlook.ca |
| 3 | Leilani Preston | 1-835-660-8911 | vitae.mauris.sit@yahoo.edu |
Example Code
html
<div class="flex w-full overflow-x-auto">
<table class="table-compact table max-w-4xl">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kasper Pollard</td>
<td>(683) 593-2687</td>
<td>lorem.sit.amet@protonmail.edu</td>
</tr>
<tr>
<td>2</td>
<td>Abra Buck</td>
<td>(825) 419-2084</td>
<td>vitae@outlook.ca</td>
</tr>
<tr>
<td>3</td>
<td>Leilani Preston</td>
<td>1-835-660-8911</td>
<td>vitae.mauris.sit@yahoo.edu</td>
</tr>
</tbody>
</table>
</div>