{% comment %}

Mockup table

{% endcomment %}

<style>
    thead tr { border-bottom: 2px solid lightgray; }

    .w-15px { width: 15px; }
    .w-18px { width: 18px; }
    .w-20px { width: 20px; }
    .w-89px { width: 89px; }
    .w-90px { width: 90px; }
    .w-95px { width: 95px; }
    .w-100px { width: 100px; }
    .w-118px { width: 118px; }
    .w-110px { width: 110px; }
    .w-125px { width: 125px; }
</style>

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Gene ID</th>
            <th scope="col">Description</th>
            <th scope="col">Domains</th>
        </tr>
    </thead>
    {# djlint:off H021 #}
    <tbody>
        <tr>
            <th scope="row">
                <span class="placeholder w-20px"></span>
            </th>
            <td>
                <span class="placeholder w-110px"></span>
            </td>
            <td>
                <span class="placeholder w-110px"></span>
            </td>
            <td>
                <span class="placeholder w-95px"></span>
            </td>
        </tr>
        <tr>
            <th scope="row">
                <span class="placeholder w-15px"></span>
            </th>
            <td>
                <span class="placeholder w-125px"></span>
            </td>
            <td>
                <span class="placeholder w-90px"></span>
            </td>
            <td>
                <span class="placeholder w-89px"></span>
            </td>
        </tr>
        <tr>
            <th scope="row">
                <span class="placeholder w-18px"></span>
            </th>
            <td>
                <span class="placeholder w-118px"></span>
            </td>
            <td>
                <span class="placeholder w-100px"></span>
            </td>
            <td>
                <span class="placeholder w-100px"></span>
            </td>
        </tr>
    </tbody>
    {# djlint:on #}
</table>