O exemplo a seguir foi feito em vue.js, na qual possui uma tabela com as colunas nome, tipo, status e data de criação.
Primeiramente vamos ajustar a tag <table> com a propriedade table-layout: auto, isso fará com que a largura de suas colunas se adaptem melhor em resoluções menores. Outro detalhe de destaque, é que a partir de 768px pra baixo, o thead da coluna data de criação é escondida, já que não tem a necessidade de ser mostrada.
Para a configuração das tags <td>, foi feito o ajuste de largura conforme desejado. Ah, o nome como pode ser grande, no celular optei para manter somente 1 linha e adicionar “…” ao final caso não encaixe na largura disponível. Para isso foi usado o mixin line-clamp. Outro ponto para destacar, é que se houver outros elementos dentro da td.name ou existir padding nela, o line-clamp pode acabar não funcionando corretamente. Para isso foi criado uma tag filha chamada .name-wrapper para encapsular todas essas informações, e adicionado o display: flex, para mantê-los alinhados.
Bom, com isso sua tabela terá um melhor resultado de visualização, evitando ter aquele scroll chato o tempo todo quebrando na tela.
