1

estou com um problema de alinhamento numa tabela em que precisei aplicar uma barra de rolagem no corpo, deixando o cabeçalho fixo. Ocorre que as células do corpo ficam desalinhadas em relação às do cabeçalho. Manipulando o width do thead não alcancei resultado preciso. Inseri borda só pra ficar mais fácil visualizar o problema.

https://uploaddeimagens.com.br/imagens/table_css-jpg

Segue o código:

<html>
   <head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
        <style type="text/css">
            #listIcv thead {
                width: 98%;
                background-color: #DCDCDC;
            }
            #listIcv tbody {
                height: 150px;
                overflow-y: auto;
                width: 100%;
            }
            #listIcv thead, #listIcv tbody, #listIcv tr, #listIcv td, #listIcv th {
                display: block;
            }
            #listIcv tbody td, #listIcv thead > tr > th {
                float: left;
            }
        </style>
    </head>
    <body>
        <table class="table table-striped table-hover" id="listIcv">
            <thead>
                <tr>
                    <th class="col-xs-4">Atributo 1</th><th class="col-xs-2">Atributo 2</th><th class="col-xs-2">Atributo 3</th><th class="col-xs-2">Atributo 4</th><th class="col-xs-1">A</th><th class="col-xs-1">B</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="col-xs-4">Atributo 1</td><td class="col-xs-2">Atributo 2</td><td class="col-xs-2">Atributo 3</td><td class="col-xs-2">Atributo 4</td><td class="col-xs-1">A</td><td class="col-xs-1">B</td>
                    <td class="col-xs-4">Atributo 1</td><td class="col-xs-2">Atributo 2</td><td class="col-xs-2">Atributo 3</td><td class="col-xs-2">Atributo 4</td><td class="col-xs-1">A</td><td class="col-xs-1">B</td>
                    <td class="col-xs-4">Atributo 1</td><td class="col-xs-2">Atributo 2</td><td class="col-xs-2">Atributo 3</td><td class="col-xs-2">Atributo 4</td><td class="col-xs-1">A</td><td class="col-xs-1">B</td>
                    <td class="col-xs-4">Atributo 1</td><td class="col-xs-2">Atributo 2</td><td class="col-xs-2">Atributo 3</td><td class="col-xs-2">Atributo 4</td><td class="col-xs-1">A</td><td class="col-xs-1">B</td>
                    <td class="col-xs-4">Atributo 1</td><td class="col-xs-2">Atributo 2</td><td class="col-xs-2">Atributo 3</td><td class="col-xs-2">Atributo 4</td><td class="col-xs-1">A</td><td class="col-xs-1">B</td>
                    <td class="col-xs-4">Atributo 1</td><td class="col-xs-2">Atributo 2</td><td class="col-xs-2">Atributo 3</td><td class="col-xs-2">Atributo 4</td><td class="col-xs-1">A</td><td class="col-xs-1">B</td>
                    <td class="col-xs-4">Atributo 1</td><td class="col-xs-2">Atributo 2</td><td class="col-xs-2">Atributo 3</td><td class="col-xs-2">Atributo 4</td><td class="col-xs-1">A</td><td class="col-xs-1">B</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

2 Respostas 2

0

Como o Guilherme falou não existe mundo perfeito nesse caso, pq cada brwoser tem por default seu scroll bar específico. Porém vc pode tentar amenizar isso com algumas técnicas.

Uma opção é descontar a largura da barra de scroll bar da largura do tbody. Tipo assim:

#listIcv tbody {
    height: 150px;
    overflow-y: auto;
    width: calc(100% - 9px); /* desconta a largura do scroll-bar */
}

Outra técnica é usar um scroll bar por jQuery, vc esconde o scroll default do Browser e usa um construido por jQuery.

Segue o link do projeto: https://github.com/inuyaksa/jquery.nicescroll

Demo: https://nicescroll.areaaperta.com/

4
  • Muito obrigado, Hugo. A explicação do Guilherme serviu pra entender a lógica do porquê isso acontece, e a sua resposta serviu pra eu conseguir o melhor "alinhamento". Queria poder marcar as duas respostas. Commented 11/12/2017 às 12:56
  • Perdoe-me, eu discordo desta resposta somente na parte que fala para usar calc, eu deixei bem explicado na resposta: É impossível acertar/corrigir isto, cada sistema operacional ou navegador vai ter um tipo de scrollbar, a largura nunca vai ser a desejada, 9px não é um tamanho padrão, o usuário pode mudar o scrollbar, fora que em cada navegador é implementado um esquema de scroll proprio.
    – Syzoth
    Commented 11/12/2017 às 13:17
  • @GuilhermeNascimento esse problema de crowsbrowser realmente fica complicado. Mesmo a solução com jQuery o usuário pode bloquear os JS e o scroll sumir totalmente. O que eu tentei passar foi uma solução para atenuar o problema do alinhamento apenas. A solução perfeita acho que ainda não existe, mas trocar essa ideia só enriquece o site, tmj []´s
    – hugocsl
    Commented 11/12/2017 às 15:14
  • Então, mas não é só cross-browser, se o usuário for no painel do WINDOWS ele pode customizar o scrollbar e vai afetar tudo de qualquer forma.
    – Syzoth
    Commented 11/12/2017 às 20:26
0

É impossível acertar/corrigir isto, cada sistema operacional ou navegador vai ter um tipo de scrollbar, a largura nunca vai ser a desejada

Outro problema em seu código é que você esta aplicando col- que são classes para elementos responsivos em THs e TDs, isso no minimo vai quebrar a tabela de uma forma ou de outra, não vou lhe dar uma solução mágica, o que vou fazer é recomendar que você use media-query (@media) para ocultar as colunas que não deseja ou então que use o overflow-x: auto; na tabela diretamente, para aplicar um scroll horizontal quando necessário, isso pode ser feito no bootstrap com table-responsive

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<table class="table table-bordered table-responsive">
    <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>

1
  • Muito obrigado, Guilherme. Estava procurando uma solução para isso há um bom tempo e já estava desconfiando que realmente não dava pra corrigir 100%. Commented 11/12/2017 às 12:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .