Essa abordagem realmente funciona bem de forma universal, especialmente para evitar que tabelas quebrem no mobile. O uso de border-collapse: separate; e overflow-x: auto; garante que as células fiquem bem organizadas e o scroll horizontal seja ativado quando necessário.

/* Tabela responsiva */
@media (max-width: 768px) {
table {
border-collapse: separate;
border-spacing: 0;
border-width: 1px 0 0 1px;
display: block;
overflow-x: auto;
white-space: nowrap;
width: 100% !important;
}
}