0

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?

2

0

Pesquise outras perguntas com a tag .