estou tendo dificuldades em um certo ponto responsivo do site que estou criando. Preciso de um norte.
Nessa imagem o menu lateral está fechado, ocupando menos espaço. Como minha div possui tamanho fixo ela permanece com o tamanho.
- Se eu colocar um width 100% na div a tabela perde o scroll interno, porque os dados farão ela se esticar até ficar gigantesco e a página em si ganha um scroll lateral ficando algo inviável
- Caso eu coloque uma classe de colunas responsivas o texto vai se comprimir demais ficando algo ilegível devido a quantidade numerosa de colunas
.ScrollDiv {
width: 500px;
overflow: auto;
height: 200px;
margin-left: auto;
margin-right: auto;
}
table {
width: 100%;
position: relative !important;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Título da página</title>
<meta charset="utf-8">
</head>
<body>
<div class="ScrollDiv">
<table border="1">
<thead>
<tr>
<th>Frutas</th>
<th>Verduras</th>
<th>Grãos</th>
<th>Frutas</th>
<th>Verduras</th>
<th>Grãos</th>
<th>Frutas</th>
<th>Verduras</th>
<th>Grãos</th>
<th>Frutas</th>
<th>Verduras</th>
<th>Grãos</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maçã</td>
<td>Alface</td>
<td>Arroz</td>
<td>Maçã</td>
<td>Alface</td>
<td>Arroz</td>
<td>Maçã</td>
<td>Alface</td>
<td>Arroz</td>
<td>Maçã</td>
<td>Alface</td>
<td>Arroz</td>
</tr>
<tr>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
</tr>
<tr>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
</tr>
<tr>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
</tr>
<tr>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
No snippet não coloquei o menu lateral mas ele ficaria lado a lado com conteudo da page no caso a table. Existe algum js ou css que faça a table se adequar ao tamanho da tela? Tamanhos fixos não seriam interessantes pois preciso de uma certa responsividade.
Acredito que a solução seria alterar a div que abriga a table. Porém não sei como deixar ela responsiva devido ao menu lateral.