Basic example
Use the following example of a responsive table component to show multiple rows and columns of text data.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | Wild |
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full text-left text-sm font-light">
<thead class="border-b font-medium dark:border-neutral-500">
<tr>
<th scope="col" class="px-6 py-4">#</th>
<th scope="col" class="px-6 py-4">First</th>
<th scope="col" class="px-6 py-4">Last</th>
<th scope="col" class="px-6 py-4">Handle</th>
</tr>
</thead>
<tbody>
<tr class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-4 font-medium">1</td>
<td class="whitespace-nowrap px-6 py-4">Mark</td>
<td class="whitespace-nowrap px-6 py-4">Otto</td>
<td class="whitespace-nowrap px-6 py-4">@mdo</td>
</tr>
<tr class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-4 font-medium">2</td>
<td class="whitespace-nowrap px-6 py-4">Jacob</td>
<td class="whitespace-nowrap px-6 py-4">Thornton</td>
<td class="whitespace-nowrap px-6 py-4">@fat</td>
</tr>
<tr class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-4 font-medium">3</td>
<td class="whitespace-nowrap px-6 py-4">Larry</td>
<td class="whitespace-nowrap px-6 py-4">Wild</td>
<td class="whitespace-nowrap px-6 py-4">@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!
Variants
Below are the color variations that can be used in the table component.
| Class | Heading | Heading |
|---|---|---|
| Default | Cell | Cell |
| Primary | Cell | Cell |
| Secondary | Cell | Cell |
| Success | Cell | Cell |
| Danger | Cell | Cell |
| Warning | Cell | Cell |
| Info | Cell | Cell |
| Light | Cell | Cell |
| Dark | Cell | Cell |
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full text-center text-sm font-light">
<thead class="border-b font-medium dark:border-neutral-500">
<tr>
<th scope="col" class="px-6 py-4">Class</th>
<th scope="col" class="px-6 py-4">Heading</th>
<th scope="col" class="px-6 py-4">Heading</th>
</tr>
</thead>
<tbody>
<tr class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-4 font-medium">
Default
</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
</tr>
<tr
class="border-b border-primary-200 bg-primary-100 text-neutral-800">
<td class="whitespace-nowrap px-6 py-4 font-medium">
Primary
</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
</tr>
<tr
class="border-b border-secondary-200 bg-secondary-100 text-neutral-800">
<td class="whitespace-nowrap px-6 py-4 font-medium">
Secondary
</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
</tr>
<tr
class="border-b border-success-200 bg-success-100 text-neutral-800">
<td class="whitespace-nowrap px-6 py-4 font-medium">
Success
</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
</tr>
<tr
class="border-b border-danger-200 bg-danger-100 text-neutral-800">
<td class="whitespace-nowrap px-6 py-4 font-medium">
Danger
</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
</tr>
<tr
class="border-b border-warning-200 bg-warning-100 text-neutral-800">
<td class="whitespace-nowrap px-6 py-4 font-medium">
Warning
</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
</tr>
<tr
class="border-b border-info-200 bg-info-100 text-neutral-800">
<td class="whitespace-nowrap px-6 py-4 font-medium">
Info
</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
</tr>
<tr
class="border-b border-neutral-100 bg-neutral-50 text-neutral-800 dark:bg-neutral-50">
<td class="whitespace-nowrap px-6 py-4 font-medium">
Light
</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
</tr>
<tr
class="border-b border-neutral-700 bg-neutral-800 text-neutral-50 dark:border-neutral-600 dark:bg-neutral-700">
<td class="whitespace-nowrap px-6 py-4 font-medium">
Dark
</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Striped
Use this example to increase the readability of the data sets by alternating the background colors of every second table row.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full text-left text-sm font-light">
<thead
class="border-b bg-white font-medium dark:border-neutral-500 dark:bg-neutral-600">
<tr>
<th scope="col" class="px-6 py-4">#</th>
<th scope="col" class="px-6 py-4">First</th>
<th scope="col" class="px-6 py-4">Last</th>
<th scope="col" class="px-6 py-4">Handle</th>
</tr>
</thead>
<tbody>
<tr
class="border-b bg-neutral-100 dark:border-neutral-500 dark:bg-neutral-700">
<td class="whitespace-nowrap px-6 py-4 font-medium">1</td>
<td class="whitespace-nowrap px-6 py-4">Mark</td>
<td class="whitespace-nowrap px-6 py-4">Otto</td>
<td class="whitespace-nowrap px-6 py-4">@mdo</td>
</tr>
<tr
class="border-b bg-white dark:border-neutral-500 dark:bg-neutral-600">
<td class="whitespace-nowrap px-6 py-4 font-medium">2</td>
<td class="whitespace-nowrap px-6 py-4">Jacob</td>
<td class="whitespace-nowrap px-6 py-4">Thornton</td>
<td class="whitespace-nowrap px-6 py-4">@fat</td>
</tr>
<tr
class="border-b bg-neutral-100 dark:border-neutral-500 dark:bg-neutral-700">
<td class="whitespace-nowrap px-6 py-4 font-medium">3</td>
<td
colspan="2"
class="whitespace-nowrap px-6 py-4 text-center">
Larry the Bird
</td>
<td class="whitespace-nowrap px-6 py-4">@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Hoverable
Use the hover:{bg-*} utility class from to change the
background color of a data row when hovering over the element with the
cursor.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | Wild |
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full text-left text-sm font-light">
<thead class="border-b font-medium dark:border-neutral-500">
<tr>
<th scope="col" class="px-6 py-4">#</th>
<th scope="col" class="px-6 py-4">First</th>
<th scope="col" class="px-6 py-4">Last</th>
<th scope="col" class="px-6 py-4">Handle</th>
</tr>
</thead>
<tbody>
<tr
class="border-b transition duration-300 ease-in-out hover:bg-neutral-100 dark:border-neutral-500 dark:hover:bg-neutral-600">
<td class="whitespace-nowrap px-6 py-4 font-medium">1</td>
<td class="whitespace-nowrap px-6 py-4">Mark</td>
<td class="whitespace-nowrap px-6 py-4">Otto</td>
<td class="whitespace-nowrap px-6 py-4">@mdo</td>
</tr>
<tr
class="border-b transition duration-300 ease-in-out hover:bg-neutral-100 dark:border-neutral-500 dark:hover:bg-neutral-600">
<td class="whitespace-nowrap px-6 py-4 font-medium">2</td>
<td class="whitespace-nowrap px-6 py-4">Jacob</td>
<td class="whitespace-nowrap px-6 py-4">Thornton</td>
<td class="whitespace-nowrap px-6 py-4">@fat</td>
</tr>
<tr
class="border-b transition duration-300 ease-in-out hover:bg-neutral-100 dark:border-neutral-500 dark:hover:bg-neutral-600">
<td class="whitespace-nowrap px-6 py-4 font-medium">3</td>
<td class="whitespace-nowrap px-6 py-4">Larry</td>
<td class="whitespace-nowrap px-6 py-4">Wild</td>
<td class="whitespace-nowrap px-6 py-4">@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Bordered
Using a bordered table allows you to visibly organize your data with a solid border.
Add the .border class for borders on all sides of the table and cells.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table
class="min-w-full border text-center text-sm font-light dark:border-neutral-500">
<thead class="border-b font-medium dark:border-neutral-500">
<tr>
<th
scope="col"
class="border-r px-6 py-4 dark:border-neutral-500">
#
</th>
<th
scope="col"
class="border-r px-6 py-4 dark:border-neutral-500">
First
</th>
<th
scope="col"
class="border-r px-6 py-4 dark:border-neutral-500">
Last
</th>
<th scope="col" class="px-6 py-4">Handle</th>
</tr>
</thead>
<tbody>
<tr class="border-b dark:border-neutral-500">
<td
class="whitespace-nowrap border-r px-6 py-4 font-medium dark:border-neutral-500">
1
</td>
<td
class="whitespace-nowrap border-r px-6 py-4 dark:border-neutral-500">
Mark
</td>
<td
class="whitespace-nowrap border-r px-6 py-4 dark:border-neutral-500">
Otto
</td>
<td class="whitespace-nowrap px-6 py-4">@mdo</td>
</tr>
<tr class="border-b dark:border-neutral-500">
<td
class="whitespace-nowrap border-r px-6 py-4 font-medium dark:border-neutral-500">
2
</td>
<td
class="whitespace-nowrap border-r px-6 py-4 dark:border-neutral-500">
Jacob
</td>
<td
class="whitespace-nowrap border-r px-6 py-4 dark:border-neutral-500">
Thornton
</td>
<td class="whitespace-nowrap px-6 py-4">@fat</td>
</tr>
<tr class="border-b dark:border-neutral-500">
<td
class="whitespace-nowrap border-r px-6 py-4 font-medium dark:border-neutral-500">
3
</td>
<td
colspan="2"
class="whitespace-nowrap border-r px-6 py-4 dark:border-neutral-500">
Larry the Bird
</td>
<td class="whitespace-nowrap px-6 py-4">@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Borderless
Borderless table is useful for layouts where lightness is important and we won't be putting much data in its structure.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full text-center text-sm font-light">
<thead class="font-medium">
<tr>
<th scope="col" class="px-6 py-4">#</th>
<th scope="col" class="px-6 py-4">First</th>
<th scope="col" class="px-6 py-4">Last</th>
<th scope="col" class="px-6 py-4">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td class="whitespace-nowrap px-6 py-4 font-medium">1</td>
<td class="whitespace-nowrap px-6 py-4">Mark</td>
<td class="whitespace-nowrap px-6 py-4">Otto</td>
<td class="whitespace-nowrap px-6 py-4">@mdo</td>
</tr>
<tr>
<td class="whitespace-nowrap px-6 py-4 font-medium">2</td>
<td class="whitespace-nowrap px-6 py-4">Jacob</td>
<td class="whitespace-nowrap px-6 py-4">Thornton</td>
<td class="whitespace-nowrap px-6 py-4">@fat</td>
</tr>
<tr>
<td class="whitespace-nowrap px-6 py-4 font-medium">3</td>
<td colspan="2" class="whitespace-nowrap px-6 py-4">
Larry the Bird
</td>
<td class="whitespace-nowrap px-6 py-4">@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Small
Use small table to make tables more compact by cutting cell padding in half.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full text-center text-sm font-light">
<thead class="border-b font-medium dark:border-neutral-500">
<tr>
<th scope="col" class="px-6 py-2">#</th>
<th scope="col" class="px-6 py-2">First</th>
<th scope="col" class="px-6 py-2">Last</th>
<th scope="col" class="px-6 py-2">Handle</th>
</tr>
</thead>
<tbody>
<tr class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-2 font-medium">1</td>
<td class="whitespace-nowrap px-6 py-2">Mark</td>
<td class="whitespace-nowrap px-6 py-2">Otto</td>
<td class="whitespace-nowrap px-6 py-2">@mdo</td>
</tr>
<tr class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-2 font-medium">2</td>
<td class="whitespace-nowrap px-6 py-2 ">Jacob</td>
<td class="whitespace-nowrap px-6 py-2">Thornton</td>
<td class="whitespace-nowrap px-6 py-2">@fat</td>
</tr>
<tr class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-2 font-medium">3</td>
<td colspan="2" class="whitespace-nowrap px-6 py-2">
Larry the Bird
</td>
<td class="whitespace-nowrap px-6 py-2">@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Light Head
Use .bg-neutral-50 class to make the head table light.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full text-center text-sm font-light">
<thead
class="border-b bg-neutral-50 font-medium dark:border-neutral-500 dark:text-neutral-800">
<tr>
<th scope="col" class=" px-6 py-4">#</th>
<th scope="col" class=" px-6 py-4">First</th>
<th scope="col" class=" px-6 py-4">Last</th>
<th scope="col" class=" px-6 py-4">Handle</th>
</tr>
</thead>
<tbody>
<tr class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-4 font-medium">1</td>
<td class="whitespace-nowrap px-6 py-4">Mark</td>
<td class="whitespace-nowrap px-6 py-4">Otto</td>
<td class="whitespace-nowrap px-6 py-4">@mdo</td>
</tr>
<tr class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-4 font-medium">2</td>
<td class="whitespace-nowrap px-6 py-4 ">Jacob</td>
<td class="whitespace-nowrap px-6 py-4">Thornton</td>
<td class="whitespace-nowrap px-6 py-4">@fat</td>
</tr>
<tr class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-4 font-medium">3</td>
<td colspan="2" class="whitespace-nowrap px-6 py-4">
Larry the Bird
</td>
<td class="whitespace-nowrap px-6 py-4">@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Dark Head
Use .bg-neutral-800 class to make the head table dark.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full text-center text-sm font-light">
<thead
class="border-b bg-neutral-800 font-medium text-white dark:border-neutral-500 dark:bg-neutral-900">
<tr>
<th scope="col" class=" px-6 py-4">#</th>
<th scope="col" class=" px-6 py-4">First</th>
<th scope="col" class=" px-6 py-4">Last</th>
<th scope="col" class=" px-6 py-4">Handle</th>
</tr>
</thead>
<tbody>
<tr class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-4 font-medium">1</td>
<td class="whitespace-nowrap px-6 py-4">Mark</td>
<td class="whitespace-nowrap px-6 py-4">Otto</td>
<td class="whitespace-nowrap px-6 py-4">@mdo</td>
</tr>
<tr class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-4 font-medium">2</td>
<td class="whitespace-nowrap px-6 py-4 ">Jacob</td>
<td class="whitespace-nowrap px-6 py-4">Thornton</td>
<td class="whitespace-nowrap px-6 py-4">@fat</td>
</tr>
<tr class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-4 font-medium">3</td>
<td colspan="2" class="whitespace-nowrap px-6 py-4">
Larry the Bird
</td>
<td class="whitespace-nowrap px-6 py-4">@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Always responsive
Responsive table will display a horizontal scroll bar if the screen is too small to display the full content. Resize the browser window to see the effect.
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="flex flex-col overflow-x-auto">
<div class="sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
<div class="overflow-x-auto">
<table class="min-w-full text-left text-sm font-light">
<thead class="border-b font-medium dark:border-neutral-500">
<tr>
<th scope="col" class="px-6 py-4">#</th>
<th scope="col" class="px-6 py-4">Heading</th>
<th scope="col" class="px-6 py-4">Heading</th>
<th scope="col" class="px-6 py-4">Heading</th>
<th scope="col" class="px-6 py-4">Heading</th>
<th scope="col" class="px-6 py-4">Heading</th>
<th scope="col" class="px-6 py-4">Heading</th>
<th scope="col" class="px-6 py-4">Heading</th>
<th scope="col" class="px-6 py-4">Heading</th>
</tr>
</thead>
<tbody>
<tr class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-4 font-medium">1</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
</tr>
<tr class="border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-4 font-medium ">2</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4 ">Cell</td>
<td class="whitespace-nowrap px-6 py-4 ">Cell</td>
</tr>
<tr class="border-b ">
<td class="whitespace-nowrap px-6 py-4 font-medium ">3</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
<td class="whitespace-nowrap px-6 py-4">Cell</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Related resources
Tutorials:
colors
hover state
focus active and others
dark mode
arbitrary values
flexbox
text
spacing
rounded corners
lists
cards
sizing
Extended Docs:
colors
dividers
hover effects
list group
charts
border opacity
borders
box sizing
breakpoints
center grid items
center text
colors
columns
dark theme
overflow
overflow hidden
paragraph spacing
position
spacing