En-tête ne défile pas sur l'en-tête fixe de la table

J'ai une table de conception avec en-tête fixe mais le problème est que dans le corps de la table de l'appareil plus petit utilisant le défilement horizontal mais reste fixe.En-tête ne défile pas sur l'en-tête fixe de la table

Voici mon code:

.fixed_headers { width: 100%; table-layout: fixed; background: #ddd; border-radius: 5px; } 
 
.fixed_headers thead { display: flex; border-radius: 5px 5px 0 0; } 
 
.fixed_headers td { border-bottom: 1px solid #f00; } 
 
.fixed_headers td, 
 
.fixed_headers th { flex: 1 1; line-height: 40px; font-family: 'DIN Alternate'; font-size: 20px; text-align: left; padding: 0 10px; margin-top: 6px !important; } 
 
.fixed_headers thead th, .fixed_headers thead th h5{ text-shadow: 1px 1px 3px #000; font-size: 20px; margin: 0; line-height: 32px; } 
 
.fixed_headers tr{ display: flex !important; width: 100%; } 
 
.fixed_headers thead { background-color: #f00; color: #fdfdfd; } 
 
.fixed_headers td:nth-child(1), 
 
.fixed_headers th:nth-child(1) { min-width: 100px; width: 20%; } 
 
.fixed_headers td:nth-child(2), 
 
.fixed_headers th:nth-child(2) { width: 30%; min-width: 250px; } 
 
.fixed_headers td { font-size: 18px; } 
 
.fixed_headers td:nth-child(3), 
 
.fixed_headers th:nth-child(3) { width: 20%; min-width: 150px; } 
 
.fixed_headers td:nth-child(4), 
 
.fixed_headers th:nth-child(4) { width: 30%; min-width: 150px; } 
 
.fixed_headers thead tr { display: block; position: relative; } 
 
.fixed_headers tbody { display: block; overflow: auto; width: 100%; height: 130px; } 
 
.fixed_headers tbody::-webkit-scrollbar { width: 10px; } 
 
.fixed_headers tbody::-webkit-scrollbar-thumb { border-radius: 10px; background: #f00; border: 2px solid white; }

<table class="fixed_headers" border="0" cellspacing="0" cellpadding="0" id="list"> 
 
    <thead> 
 
     <tr> 
 
     <th> 
 
      <h5>DATA</h5> 
 
     </th> 
 
     <th> 
 
      <h5>NOME COMPLETO</h5> 
 
     </th> 
 
     <th> 
 
      <h5>TELEFONE</h5> 
 
     </th> 
 
     <th> 
 
      <h5>PRÊMIO</h5> 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-03-01</td> 
 
     <td>André Oliveira</td> 
 
     <td>(21)96772-2098</td> 
 
     <td>R$ 1.000,00</td> 
 
     </tr> 
 
    </tbody> 
 
    </table>

Pouvez-vous s'il vous plaît me aider?

Source

2017-03-03 Humaira Naaz

bien cela ne peut être réalisé en utilisant uniquement CSS, vous auriez certainement utiliser des scripts, jqurey sera beaucoup à gérer cela, reportez-vous à la solution mentionnée dans la réponse ci-dessous –

Copie possible de [Table d'en-tête fixe avec barre de défilement horizontale et barre de défilement verticale sur] (http://stackoverflow.com/questions/14977864/fixed-header-table-with-horizontal-scrollbar-and-vertical-scrollbar-on) –

Vous devrez séparer votre en-tête et votre corps dans 2 tables et définir des largeurs fixes sur vos colonnes (ou utiliser JavaScript pour le configurer). Ensuite, lorsque vous faites défiler à gauche sur votre corps, vous faites défiler l'en-tête avec JavaScript.

Solution ici: https://stackoverflow.com/a/35947146/2432554

Source

2017-03-03 16:40:26 Zetura

En-tête ne défile pas sur l'en-tête fixe de la table

Répondre

Questions connexes