tenho uma tela de listagem de itens e tudo nela é fixo, nn pode ter o scroll do lado, mas dentro dessa tela tem uma table e essa table pode ter o scroll porem a unica coisa q pode rolar para baixo são as linhas, o cabeçalho nn. A solução q eu encontrei foi fazer duas tables, uma para o cabeçalho e outra pra os itens, só q eu nn consigo sincronizar as colunas das duas tables, segue um codigo de exemplo para ficar mais claro:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<table class="table table-bordered table-sm" style="width: 100%; margin-bottom: 0;">
<thead class="thead-light">
<tr>
<th style="text-align: center; width: 4%;">#</th>
<th style="width: 44.5%;">Nome</th>
<th style="width: 29.5%;">Nascimento</th>
<th style="width: 10%;">Sexo</th>
<th style="width: 20%;">Telefone</th>
</tr>
</thead>
</table>
<div class="tabela-responsiva-heigth" style="width: 101.083637812%; margin-right: 25%;">
<table class="table table-hover table-sm" style="border: 1px solid #dee2e6; width: 100%;">
<tbody>
<tr [ngClass]="{linhaSelecionada : objSelecionado.id === cliente.id}" (click)="setSelecionado(cliente)" *ngFor="let cliente of page.listaPaginada">
<td style="text-align: center; width: 4%;">id</td>
<td style="width: 44.5%;">nome</td>
<td style="width: 29.5%;">dataNascimento</td>
<td style="width: 10%;">sexo</td>
<td style="width: 20%;">telefone</td>
</tr>
</tbody>
</table>
</div>
o problema é q a table dos itens fica dessincronizando com a table do cabeçalho, o tamanho dela varia de acordo com o scroll, se tem o scroll ela é de um tamanho, se nn tem ela é de outro, e eu estou usando porcentagem para definir os tamanhos pq acredito q é melhor e tbm para ser responsivo(eu acho) alguem pode me ajudar?
position: sticky;
no<thead>
. Só que no Chrome não funciona, tem um bug especificamente com<thead>
. Segue os links que o Hugo mandou que tem informações suficientes.