Tabela HTML: cabeçalho de sobreposição de coluna fixa

Ala Soua Publicado em Dev

122

Ala Soua

Estou tentando implementar uma tabela HTML que poderia ter uma coluna (s) e um cabeçalho aderente ao mesmo tempo, usando javascript e css.

Basicamente, estou tentando garantir a aderência do cabeçalho e das colunas, traduzindo-os na posição correta sempre que a posição de rolagem é alterada.

Essa técnica funciona bem, quando eu rolar horizontalmente, as colunas fixas são exibidas corretamente na posição fixa, mas quando eu começo a rolar verticalmente, as células das colunas fixas se sobrepõem às células do cabeçalho e as ocultam.

Aqui está o que estou vendo quando acontece

Tentei brincar com o Z-index para ter certeza de que o cabeçalho está sempre no topo das linhas, mas por algum motivo não está funcionando.

Se alguém já encontrou esse problema e pudesse compartilhar uma maneira de corrigi-lo, ficaria muito grato.

Desde já, obrigado.

HTML:

<table class="tablesorter">
    <thead class="sticky-header">
        <tr>
            <th class="sticky-column">Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            ...
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            ...
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            ...
        </tr>
    </tbody>
</table>

Javascript:

var $win = $(window),
$stickyHeader = $('.sticky-header'),
$stickyColumns = $('.sticky-column');

$(document).on('scroll', function () {
    deltaY = $win.scrollTop() - $stickyHeader.offset().top;
    deltaX = $win.scrollLeft() - $stickyHeader.offset().left;
    $stickyHeader.children().css({
        "transform": "translate(0px," + (deltaY > 0 ? deltaY : 0) + 
"px)"
    });
    $stickyColumns.css({
        "transform": "translate(" + (deltaX > 0 ? deltaX : 0) + "px, 
0px)"
    });
});

CSS:

    table {
    margin: 100px auto 800px auto;
}

thead th {
  background-color: yellow;
  border-right: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 60px;
  z-index: 3;
}
tbody td {
  background-color: red;
  border-right: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 30px;
  z-index: 1;
}

tbody td.sticky-column {
  z-index: 2;
}

tbody th.sticky-column {
  z-index: 4;
}

Aqui está o JSFiddle reproduzindo o problema: http://jsfiddle.net/asoua/5942rqty/

Todd Chaffee

Usei uma combinação de z-index e uma mudança em sua lógica para fazê-la funcionar. Essa coluna de canto precisa de ambas as transformações dos eixos xey.

var $win = $(window),
    $stickyHeader = $('.sticky-header'),
    $stickyColumns = $('.sticky-column'),
    $stickyCorner = $('.sticky-corner');
    

$(document).on('scroll', function () {
    deltaY = $win.scrollTop() - $stickyHeader.offset().top;
    deltaX = $win.scrollLeft() - $stickyHeader.offset().left;

    $stickyColumns.css({
        "transform": "translate(" + (deltaX > 0 ? deltaX : 0) + "px, 0px)"
    });
    
    $stickyHeader.children().css({
        "transform": "translate(0px," + (deltaY > 0 ? deltaY : 0) + "px)"
    });
    
    $stickyCorner.css({
        "transform": "translate(" + (deltaX > 0 ? deltaX : 0) + "px," + (deltaY > 0 ? deltaY : 0) + "px)"
    });    


});

table {
    margin: 100px auto 800px auto;
}

thead th {
  background-color: yellow;
  border-right: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 60px;
  z-index: 3;
}
tbody td {
  background-color: red;
  border-right: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 30px;
  z-index: 1;
}

tbody td.sticky-column {
  z-index: 1;
}

thead tr.sticky-column {
  z-index: 2;
}

thead th.sticky-corner {
  background-color: orange;
  z-index: 10;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tablesorter">
    <thead>
        <tr class="sticky-header">
            <th class="sticky-corner">Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
            <th>Whatever Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
        <tr>
            <td class="sticky-column">Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
            <td>Whatever</td>
        </tr>
    </tbody>
</table>

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em2021-01-14

deixe-me dizer algumas palavras

0comentários

loginDepois de participar da revisão

TOP lista

artigo

Tabela HTML: cabeçalho de sobreposição de coluna fixa

Tabela HTML: cabeçalho de sobreposição de coluna fixa

Modbus Python Schneider PM5300

Como usar HttpClient com TODO O certificado SSL, não importa como "ruim" é

Método \ "POST \" não permitido no framework Django rest com ações extras & ModelViewset

Formatar código como um bloco de código em R Markdown

debian 8: comando deb não encontrado. Como posso corrigir isso?

how can i turn off the debug view in electron?i cant find any about it using google

Setas rotuladas horizontais apontando para uma linha vertical

Como obter a entrada de trás de diálogo em treeview pyqt5 python 3

O material angular não carrega os estilos corretamente

Problema de escalada que requer programação dinâmica

Why isn't my C# .Net Core Rest API route finding my method?

Uma pilha LAMJ é um ambiente possível?

WooCommerce obtém a quantidade do pedido na página de agradecimento e redireciona

Como recuperar parâmetros de entrada usando C #?

iterar sobre a matriz JSON em reagente nativo

Curved lines using border

Java thread.sleep (1) dormindo por mais de 1 ms

HTML & amp; maiúsculas e Minúsculas

regex para destacar novos caracteres de linha no início e no fim

Erros de conexão Mysql

Jackson, java.time, ISO 8601, serialize sem milissegundos