<div class="table-wrapper">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td>Admin</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>Editor</td>
</tr>
<tr>
<td>Bob Wilson</td>
<td>bob@example.com</td>
<td>Viewer</td>
</tr>
</tbody>
</table>
</div>
Requires: ux.min.css
<div class="rounded-xl overflow-hidden border border-base-300">
<table class="w-full text-sm">
<thead>
<tr>
<th class="px-4 py-2.5 text-left font-semibold bg-base-200">Name</th>
<th class="px-4 py-2.5 text-left font-semibold bg-base-200">Email</th>
<th class="px-4 py-2.5 text-left font-semibold bg-base-200">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-2.5 border-b border-base-300">John Doe</td>
<td class="px-4 py-2.5 border-b border-base-300">john@example.com</td>
<td class="px-4 py-2.5 border-b border-base-300">Admin</td>
</tr>
<tr>
<td class="px-4 py-2.5 border-b border-base-300">Jane Smith</td>
<td class="px-4 py-2.5 border-b border-base-300">jane@example.com</td>
<td class="px-4 py-2.5 border-b border-base-300">Editor</td>
</tr>
<tr>
<td class="px-4 py-2.5">Bob Wilson</td>
<td class="px-4 py-2.5">bob@example.com</td>
<td class="px-4 py-2.5">Viewer</td>
</tr>
</tbody>
</table>
</div>
Requires: tw.min.css
// No JavaScript required - pure CSS styling