2

Tenho uma tabela dinâmica, e queria que a head dela ficasse fixo na dela enquanto eu dou scroll na tabela, ao chegar ao fim da tabela, o head "some" e vou assim para a próxima tabela.

Tudo isso sem que a tabela tenha td e th com width fixa, e fazendo com que as colunas continuem alinhadas.

Eu já pesquisei sobre os plugins disponíveis em Jquery e algumas maneiras usando apenas CSS. Porém, os plugins tem o problema de limitar apenas à thead, eu gostaria de tbm manter um cabeçalho da página fixo, acima do thead tbm fixo. Essa solução (do comentário), satisfaz a parte do thead, mas ele deve também deslizar horizontalmente, pois a tabela tem bastante colunas.

6
  • 2
    O que esteve tentando? Eis um exemplo: jsfiddle.net/dPixie/byB9d/3
    – BrTkCa
    Commented 10/01/2017 às 19:45
  • Eu já pesquisei sobre os plugins disponíveis em Jquery e algumas maneiras usando apenas CSS. Commented 10/01/2017 às 20:28
  • Os plugins tem o problema de limitar apenas à thead, eu gostaria de tbm manter um cabeçalho da página fixo, acima do thead tbm fixo. Essa solução que vc passou satisfaz a parte do thead, mas ele deve tbm deslizar horizontalmente, pois a tabela tem bastante colunas Commented 10/01/2017 às 20:29
  • Coloca o código. Commented 11/01/2017 às 13:52
  • Olá @Lucas Stern, Dei uma pesquisada rápida no Stackoverflow e achei este post que parece ser exatamente a sua pergunta: http://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque Sou novo aqui no Stackoverflow em Português, mas se precisar, posso traduzir a resposta para você, mas parece bem simples, utilizando HTML, CSS e javascript. Qualquer coisa, é só chamar! Abs! Commented 22/04/2017 às 21:17

1 Resposta 1

0

O código abaixo fixa o elemento thead no topo de um elemento. Assim, conforme acontece a rolagem das linhas da tabela, não é alterado o cabeçalho.

        // Change the selector if needed
var $table = $('table.scroll'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();
    
    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });    
}).resize(); // Trigger resize handler
            table.scroll {
                width: 100%; /* Optional */
                /* border-collapse: collapse; */
                border-spacing: 0;
                border: 2px solid black;
            }

            table.scroll tbody,
            table.scroll thead { display: block; }

            thead tr th { 
                height: 30px;
                line-height: 30px;
                /*text-align: left;*/
            }

            table.scroll tbody {
                height: 100px;
                overflow-y: auto;
                overflow-x: hidden;
            }

            tbody { border-top: 2px solid black; }

            tbody td, thead th {
                width: 20%; /* Optional */
                border-right: 1px solid black;
            }

            tbody td:last-child, thead th:last-child {
                border-right: none;
            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="scroll">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
    </tbody>
</table>

.fixed {
  width:350px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed th {
  text-decoration: underline;
}
.fixed th,
.fixed td {
  padding: 5px;
  text-align: left;
  min-width: 200px;
}


.fixed thead {
  background-color: red;
  color: #fdfdfd;
}
.fixed thead tr {
  display: block;
  position: relative;
}
.fixed tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100px;
  overflow-y: scroll;
    overflow-x: hidden;
}
<table class="fixed">
    <thead>
        <tr>
            <td>Name</td>
            <td>phone</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>AAAA</td>
            <td>323232</td>
        </tr>
        <tr>
            <td>BBBBB</td>
            <td>323232</td>
        </tr>
        <tr>
            <td>CCCCC</td>
            <td>3435656</td>
        </tr>
      <tr>
            <td>AAAA</td>
            <td>323232</td>
        </tr>
        <tr>
            <td>BBBBB</td>
            <td>323232</td>
        </tr>
        <tr>
            <td>CCCCC</td>
            <td>3435656</td>
        </tr>
    </tbody>
</table>

1
  • Olá, Fernando! Seja bem vindo! Consegue descrever na resposta como este código da solução pode ajudar no problema do colega?
    – Dherik
    Commented 13/08/2018 às 20:16

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