Hello everyone! It’s Monday, and today we are going to create a responsive table using Tailwind CSS. This tutorial will show you how to create a table that that doesn’t break when the screen size changes.
A table is a data structure that organizes data into rows and columns. It is a common way to display data in a structured and organized manner. Tables are used in a wide range of applications, from spreadsheets to databases to data visualization tools. They are an essential part of web design and are widely used in various industries.
Use cases: Use cases:
The main wrapper of the table is a div
element that is positioned using the flow-root
utility class. This ensures that the table is positioned independently of other elements on the page as mentioned above.
flow-root
: This class ensures that the table is positioned independently of other elements on the page as mentioned above.<div class="flow-root">
<!-- Table goes here -->
</div>
The table is wrapped in another div
element that is positioned using the overflow-x-auto
utility class. This ensures that the table scrolls horizontally if its content exceeds the width of the container.
overflow-x-auto
: This class sets the horizontal overflow to auto, allowing the table to scroll horizontally if its content exceeds the width of the container.<div class="flow-root">
<div class="overflow-x-auto">
<!-- Table goes here -->
</div>
</div>
The table container is a div
element that is positioned using the inline-block
utility class. This ensures that the table is positioned within the overflow-x-auto
container.
inline-block
: This class sets the table container to be displayed as an inline block element, allowing it to be positioned within the overflow-x-auto
container.min-w-full
: This class sets the width of the table container to be the full width of its parent container.align-middle
: This class sets the vertical alignment of the table container to be middle within its parent container.sm:px-6
: This class adds horizontal padding of 6 pixels to the table container on small screens (e.g., mobile devices).py-2
: This class adds vertical padding of 2 pixels to the table container.lg:px-8
: This class adds horizontal padding of 8 pixels to the table container on large screens (e.g., desktops).<div class="flow-root">
<div class="overflow-x-auto">
<div class="inline-block min-w-full align-middle sm:px-6 py-2 lg:px-8">
<!-- Table goes here -->
</div>
</div>
</div>
The table itself is a table
element that is positioned using the min-w-full
utility class. This ensures that the table takes up the full width of its container.
min-w-full
: This class sets the width of the table to be the full width of its container.divide-y
: This class adds a divider between each row of the table.divide-neutral-300
: This class sets the color of the divider to a light gray.<div class="flow-root">
<div class="overflow-x-auto">
<div class="inline-block min-w-full align-middle sm:px-6 py-2 lg:px-8">
<table class="min-w-full divide-y divide-neutral-300">
<!-- Table content goes here -->
<table class="min-w-full divide-y divide-neutral-300">
</div>
</div>
</div>
The table header is a thead
element that is positioned using the relative
utility class. This ensures that the table header is positioned relative to its parent container. The table header contains the table’s column names.
py-3.5
: This class sets the vertical padding of the table header cells to 3.5 pixels.text-left
: This class sets the text alignment of the table header cells to left.pl-4
: This class sets the left padding of the table header cells to 4 pixels.pr-3
: This class sets the right padding of the table header cells to 3 pixels.sm:pl-0
: This class sets the left padding of the table header cells to 0 pixels on small screens (e.g., mobile devices).<thead>
<tr>
<th
scope="col"
class="py-3.5 pl-4 pr-3 text-left sm:pl-0"
>Name</th
>
<th
scope="col"
class="px-3 py-3.5 text-left"
>Title</th
>
<th
scope="col"
class="px-3 py-3.5 text-left"
>Status</th
>
<th
scope="col"
class="px-3 py-3.5 text-left"
>Role</th
>
<th
scope="col"
class="relative py-3.5 pl-3 pr-4 sm:pr-0">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
The table body is a tbody
element that is positioned using the divide-y
utility class. This ensures that the table body has a divider between each row of the table.
<tbody class="divide-y divide-neutral-200 bg-white">
<tr>
<!-- Table row goes here -->
</tr>
<!-- More people... -->
</tbody>
The table’s data rows are represented by tr
elements that are positioned using the whitespace-nowrap
utility class. This ensures that the table’s data rows do not wrap to the next line.
whitespace-nowrap
: This class ensures that the table’s data rows do not wrap to the next line.py-5
: This class sets the vertical padding of the table’s data rows to 5 pixels.text-sm
: This class sets the font size of the table’s data rows to small.pl-4
: This class sets the left padding of the table’s data rows to 4 pixels.sm:pl-0
: This class sets the left padding of the table’s data rows to 0 pixels on small screens (e.g., mobile devices).pr-4
: This class sets the right padding of the table’s data rows to 4 pixels.pl-3
: This class sets the left padding of the table’s data rows to 3 pixels.sm:pr-0
: This class sets the right padding of the table’s data rows to 0 pixels on small screens (e.g., mobile devices).text-right
: This class sets the text alignment of the table’s data rows to right.<tr>
<td class="whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0">
<div class="flex items-center">
<div class="size-11 flex-shrink-0">
<img
class="size-11 rounded-full"
src="/avatars/8.png"
alt=""
/>
</div>
<div class="ml-4">
<div class="font-medium text-black">Michael Andreuzza</div>
<div class="mt-1 text-neutral-500">michael@lexingtonthemes.com</div>
</div>
</div>
</td>
<td class="whitespace-nowrap px-3 py-5 text-sm text-neutral-500">
<div class="text-black">Digital Duct Tape Engineer</div>
<div class="mt-1 text-neutral-500">Optimization</div>
</td>
<td class="whitespace-nowrap px-3 py-5 text-sm text-neutral-500">
<span
class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-500"
>Awake (mostly)</span
>
</td>
<td class="whitespace-nowrap px-3 py-5 text-sm text-neutral-500">
Error Message Translator</td
>
<td
class="relative whitespace-nowrap py-5 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
<a
href="#"
class="text-blue-600 hover:text-blue-900"
>Edit<span class="sr-only">,Michael Andreuzza</span></a
>
</td>
</tr>
Here is the full markup for the responsive table, including the wrapper, the horizontal overflow, the table container, the table header, the table body, and the table’s data rows. This markup ensures that the table takes up the full width of the screen and has a divider between each row.
<div class="flow-root">
<div class="overflow-x-auto">
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<table class="min-w-full divide-y divide-neutral-300">
<thead>
<tr>
<th
scope="col"
class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-neutral-500 sm:pl-0"
>Name</th
>
<th
scope="col"
class="px-3 py-3.5 text-left text-sm font-semibold text-neutral-500"
>Title</th
>
<th
scope="col"
class="px-3 py-3.5 text-left text-sm font-semibold text-neutral-500"
>Status</th
>
<th
scope="col"
class="px-3 py-3.5 text-left text-sm font-semibold text-neutral-500"
>Role</th
>
<th
scope="col"
class="relative py-3.5 pl-3 pr-4 sm:pr-0">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody class="divide-y divide-neutral-200 bg-white">
<tr>
<td class="whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0">
<div class="flex items-center">
<div class="size-11 flex-shrink-0">
<img
class="size-11 rounded-full"
src="/avatars/8.png"
alt=""
/>
</div>
<div class="ml-4">
<div class="font-medium text-black">Michael Andreuzza</div>
<div class="mt-1 text-neutral-500">
michael@lexingtonthemes.com
</div>
</div>
</div>
</td>
<td class="whitespace-nowrap px-3 py-5 text-sm text-neutral-500">
<div class="text-black">Digital Duct Tape Engineer</div>
<div class="mt-1 text-neutral-500">Optimization</div>
</td>
<td class="whitespace-nowrap px-3 py-5 text-sm text-neutral-500">
<span
class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-500"
>Awake (mostly)</span
>
</td>
<td class="whitespace-nowrap px-3 py-5 text-sm text-neutral-500">
Error Message Translator</td
>
<td
class="relative whitespace-nowrap py-5 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
<a
href="#"
class="text-blue-600 hover:text-blue-900"
>Edit<span class="sr-only">,Michael Andreuzza</span></a
>
</td>
</tr>
<!-- More people... -->
</tbody>
</table>
</div>
</div>
</div>
In this tutorial, we explored the concept of responsive tables and how to create a responsive table using Tailwind CSS. We learned how to create a responsive table that takes up the full width of the screen and has a divider between each row.
Hope you enjoyed this tutorial and have a great day!
/Michael Andreuzza
Get lifetime access to every theme available today for $199 $139 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
— No subscription required!