Bom dia a todos ! Pessoal estou há um bom tempo tentando deixar a tela responsiva em tamanho mobile em uma tela que tenho uma tabela e dentro dela outra que fica colapsada. Alguém têm uma sugestão ? Segue imagem. !!
Bom dia a todos ! Pessoal estou há um bom tempo tentando deixar a tela responsiva em tamanho mobile em uma tela que tenho uma tabela e dentro dela outra que fica colapsada. Alguém têm uma sugestão ? Segue imagem. !!
Olá, Leandro!
A imagem não carregou, mas algumas sugestões, é para que vc defina um overflow-x: auto; para o contêiner da tabela. Isso vai criar uma rolagem lateral, acredito que em certas situações como essa, esse scroll lateral seja válido.
.tabela-container {
overflow-x: auto;
}
<div class="tabela-container">
<table>
<!-- Conteúdo da tabela -->
</table>
</div>
Utilize media queries para ajustar o layout da tabela em diferentes tamanhos de tela.
Você também pode testar o Bootstrap, que já tem umas classes específicas para tornar tabelas responsivas. Por exemplo, você pode envolver sua tabela com a classe table-responsive.
<div class="table-responsive">
<table class="table">
<!-- Conteúdo da tabela -->
</table>
</div>
Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!