Tailwind CSS Tables
Tailwind CSS provides a set of convenient utility classes for creating and customizing tables.
With these utility classes, you can easily control the styling of tables, including borders, spacing, alignment, font styles, and more.
Next, we will introduce in detail how to use Tailwind CSS to create and customize tables.
Basic Table Styles
Tailwind CSS provides some basic classes for controlling the appearance and layout of tables. Commonly used utility classes include table-auto and table-fixed, which are used to set the table layout.
table-auto: Default layout, the column widths of the table are automatically determined by the content.table-fixed: The table column widths are fixed. The width of all columns is evenly divided based on the total width of the table, suitable for tables with uniform column widths.
Using table-auto allows the table to automatically adjust column widths to fit the cell content.
Example
<thead>
<tr>
<th>Song</th>
<th>Artist</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
<td>Malcolm Lockyer</td>
<td>1961</td>
</tr>
<tr>
<td>Witchy Woman</td>
<td>The Eagles</td>
<td>1972</td>
</tr>
<tr>
<td>Shining Star</td>
<td>Earth, Wind, and Fire</td>
<td>1975</td>
</tr>
</tbody>
</table>
Try it Yourself »
Using table-fixed allows the table to ignore content and use fixed widths for columns. The width of the first row will set the column widths for the entire table.
Example
<thead>
<tr>
<th>Song</th>
<th>Artist</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
<td>Malcolm Lockyer</td>
<td>1961</td>
</tr>
<tr>
<td>Witchy Woman</td>
<td>The Eagles</td>
<td>1972</td>
</tr>
<tr>
<td>Shining Star</td>
<td>Earth, Wind, and Fire</td>
<td>1975</td>
</tr>
</tbody>
</table>
Try it Yourself »
Borders and Spacing
Tailwind provides many utility classes to control table borders, padding and margins, and other layout details.
You can use classes such as border, border-collapse, border-spacing to control the border style of the table.
border: Adds borders to the table.border-collapse: Controls whether the borders of table cells are collapsed.border-spacing: Sets the spacing between cells.
Example
<thead>
<tr>
<th class="border px-4 py-2">Header 1</th>
<th class="border px-4 py-2">Header 2</th>
<th class="border px-4 py-2">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border px-4 py-2">Row 1, Col 1</td>
<td class="border px-4 py-2">Row 1, Col 2</td>
<td class="border px-4 py-2">Row 1, Col 3</td>
</tr>
<tr>
<td class="border px-4 py-2">Row 2, Col 1</td>
<td class="border px-4 py-2">Row 2, Col 2</td>
<td class="border px-4 py-2">Row 2, Col 3</td>
</tr>
</tbody>
</table>
Try it Yourself »
Padding and Margin
You can use px-* and py-* classes to set the padding of table cells, and m-* and p-* classes to set the margin of the table.
Example
<table class="table-auto w-full border-collapse">
<thead>
<tr>
<th class="border px-6 py-4">Header 1</th>
<th class="border px-6 py-4">Header 2</th>
<th class="border px-6 py-4">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border px-6 py-4">Row 1, Col 1</td>
<td class="border px-6 py-4">Row 1, Col 2</td>
<td class="border px-6 py-4">Row 1, Col 3</td>
</tr>
</tbody>
</table>
<!-- Set table margin -->
<table class="table-auto w-full border-collapse mt-8">
<thead>
<tr>
<th class="border px-4 py-2">Header 1</th>
<th class="border px-4 py-2">Header 2</th>
<th class="border px-4 py-2">Header 3</th>
</tr>
</thead>
</table>
Try it Yourself »
Alignment and Text Styles
Tailwind provides classes to control the alignment and font style of table cell content, such as:
text-left,text-center,text-right: Controls text alignment.font-semibold,font-bold: Controls font weight.uppercase,lowercase,capitalize: Controls text case.
Example
<table class="table-auto border-collapse w-full">
<thead>
<tr>
<th class="border px-4 py-2 text-center font-bold">Header 1</th>
<th class="border px-4 py-2 text-center font-bold">Header 2</th>
<th class="border px-4 py-2 text-center font-bold">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border px-4 py-2 text-center">Row 1, Col 1</td>
<td class="border px-4 py-2 text-center">Row 1, Col 2</td>
<td class="border px-4 py-2 text-center">Row 1, Col 3</td>
</tr>
</tbody>
</table>
Try it Yourself »
Merging Cells
Tailwind CSS supports setting merged cells through HTML attributes, such ascolspanandrowspan。
Example
<table class="table-auto w-full border-collapse">
<thead>
<tr>
<th class="border px-4 py-2" colspan="2">Header 1 & 2</th>
<th class="border px-4 py-2">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border px-4 py-2" colspan="2">Row 1, Col 1 & 2</td>
<td class="border px-4 py-2">Row 1, Col 3</td>
</tr>
</tbody>
</table>
Try it Yourself »
Responsive Tables
You can also use Tailwind CSS's responsive design classes to control the table layout at different screen sizes.
For example, use the sm:, md:, lg: prefixes to set the display behavior on different screens.
Example
<table class="table-auto w-full border-collapse">
<thead>
<tr>
<th class="border px-4 py-2">Header 1</th>
<th class="border px-4 py-2 hidden md:table-cell">Header 2</th>
<th class="border px-4 py-2">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border px-4 py-2">Row 1, Col 1</td>
<td class="border px-4 py-2 hidden md:table-cell">Row 1, Col 2</td>
<td class="border px-4 py-2">Row 1, Col 3</td>
</tr>
</tbody>
</table>
Try it Yourself »
Table Caption
Usecaption-topPosition the caption element at the top of the table.
Example
<caption class="caption-top">
Table 3.1: Professional wrestlers and their signature moves.
</caption>
<thead>
<tr>
<th>Wrestler</th>
<th>Signature Move(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>"Stone Cold" Steve Austin</td>
<td>Stone Cold Stunner, Lou Thesz Press</td>
</tr>
<tr>
<td>Bret "The Hitman" Hart</td>
<td >The Sharpshooter</td>
</tr>
<tr>
<td>Razor Ramon</td>
<td>Razor's Edge, Fallaway Slam</td>
</tr>
</tbody>
</table>
Try it Yourself »
Usecaption-bottomPosition the caption element at the bottom of the table.
Example
<caption class="caption-bottom">
Table 3.1: Professional wrestlers and their signature moves.
</caption>
<thead>
<tr>
<th>Wrestler</th>
<th>Signature Move(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>"Stone Cold" Steve Austin</td>
<td>Stone Cold Stunner, Lou Thesz Press</td>
</tr>
<tr>
<td>Bret "The Hitman" Hart</td>
<td >The Sharpshooter</td>
</tr>
<tr>
<td>Razor Ramon</td>
<td>Razor's Edge, Fallaway Slam</td>
</tr>
</tbody>
</table>
Try it Yourself »