Bradley Kirton's Blog

Published on April 15, 2024

Go home

Responsive tables in tailwind

The table below can be resized using the handle on the bottom right corner.

Company Alfreds FutterkisteContract Maria AndersCountry Germany
Company Centro comercial MoctezumaContract Francisco ChangCountry Mexico
Company Ernst HandelContract Roland MendelCountry Austria
Company Island TradingContract Helen BennettCountry UK
Company Laughing Bacchus WinecellarsContract Yoshi TannamuriCountry Canada
Company Magazzini Alimentari RiunitiContract Giovanni RovelliCountry Italy
<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>