Published on April 15, 2024
Go homeResponsive tables in tailwind
The table below can be resized using the handle on the bottom right corner.
| Company | Contract | Country |
|---|---|---|
| Company Alfreds Futterkiste | Contract Maria Anders | Country Germany |
| Company Centro comercial Moctezuma | Contract Francisco Chang | Country Mexico |
| Company Ernst Handel | Contract Roland Mendel | Country Austria |
| Company Island Trading | Contract Helen Bennett | Country UK |
| Company Laughing Bacchus Winecellars | Contract Yoshi Tannamuri | Country Canada |
| Company Magazzini Alimentari Riuniti | Contract Giovanni Rovelli | Country Italy |
| Company | Contract | Country |
<div class="@container w-full resize overflow-auto">
<table class="table table-compact w-full">
<thead class="hidden @@md:table-header-group">
<tr>
<th>Company</th>
<th>Contract</th>
<th>Country</th>
</tr>
</thead>
<tbody>
{% for object in data %}
<tr class="flex flex-col @md:table-row divide-y @md:divide-none divide-slate-200{% if not forloop.last %} pb-10 @md:pb-2{% endif %}">
<td class="flex flex-col @md:table-cell">
<strong class="inline-block @md:hidden">Company</strong>
<span>{{ object.company }}</span>
</td>
<td class="flex flex-col @md:table-cell">
<strong class="inline-block @md:hidden">Contract</strong>
<span>{{ object.contract }}</span>
</td>
<td class="flex flex-col @md:table-cell">
<strong class="inline-block @md:hidden">Country</strong>
<span class="truncate">{{ object.country }}</span>
</td>
</tr>
{% endfor object in data %}
</tbody>
<tfoot class="hidden @md:table-footer-group">
<tr>
<th>Company</th>
<th>Contract</th>
<th>Country</th>
</tr>
</tfoot>
</table>
<div>