How to make a table scrollable with html + tailwind css?
How to make a table scrollable with html + tailwind css?
1 answer
by
dana ,
9 months ago
@darrion.kuhn
To make a table scrollable with HTML and Tailwind CSS, you can use the following code:
- Start by creating an HTML table with the class "overflow-x-auto" to make it horizontally scrollable:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="overflow-x-auto">
<table class="min-w-full">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>555-1234</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>jane.smith@example.com</td>
<td>555-5678</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
|
- Add the following Tailwind CSS utility classes to your HTML file to style the table and make it scrollable:
1
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> |
With this code, the table will be horizontally scrollable if its content exceeds the width of the container. You can adjust the classes and styles as needed to fit your design requirements.