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 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 
<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>