table {
    @apply w-full;
}

thead {
    @apply hidden lg:table-header-group;
}

tr {
    @apply max-w-full block relative border-b-4 border-gray-100
    lg:table-row lg:border-b-0;
}

tr:last-child {
    @apply border-b-0;
}

th {
    @apply lg:text-left lg:py-2 lg:px-3;
}

td {
    @apply flex justify-between text-right py-3 px-4 align-top border-b border-gray-100
    lg:table-cell lg:text-left lg:py-2 lg:px-3 lg:align-middle lg:border-b-0;
}

tr:nth-child(odd) td {
    @apply lg:bg-gray-50;
}

td:last-child {
    @apply border-b-0;
}

tbody tr:hover td {
    @apply lg:bg-gray-100;
}

td:before {
    content: attr(data-label);
    @apply font-semibold pr-3 text-left lg:hidden;
}

td.checkbox-cell,
th.checkbox-cell {
    @apply lg:w-5;
}

td.progress-cell progress {
    @apply flex w-2/5 self-center
    lg:w-full;
}

td.image-cell {
    @apply border-b-0 lg:w-6;
}

td.image-cell:before,
td.actions-cell:before {
    @apply hidden;
}

td.image-cell .image {
    @apply w-24 h-24 mx-auto lg:w-6 lg:h-6;
}

.table-pagination {
    @apply px-6 py-3 border-t border-gray-100;
}

