TH ne fonctionne pas dans l'en-tête fixe Table

J'essaie de créer une table avec en-tête fixe. J'ai fait toutes les choses mais mon entête ne dépense pas en pleine largeur. Voici mon code et démo:TH ne fonctionne pas dans l'en-tête fixe Table

J'ai besoin d'avoir un ajustement à 100% de largeur et de couvrir tout l'espace disponible.

.fixed_headers { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    background: #ccc; 
 
    display: block; 
 
} 
 
.fixed_headers td { 
 
    border-bottom: 1px solid #f00; 
 
} 
 

 

 
.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: 20%; 
 
} 
 
.fixed_headers td:nth-child(2), 
 
.fixed_headers th:nth-child(2) { 
 
    min-width: 30%; 
 
} 
 
.fixed_headers td:nth-child(3), 
 
.fixed_headers th:nth-child(3) { 
 
    width: 20%; 
 
} 
 
.fixed_headers td:nth-child(4), 
 
.fixed_headers th:nth-child(4) { 
 
    width: 30%; 
 
} 
 
table.fixed_headers thead tr { 
 
    display: block; 
 
    position: relative; 
 
} 
 
table.fixed_headers tbody { 
 
    display: block; 
 
    overflow: auto; 
 
    width: 100%; 
 
    height: 300px; 
 
} 
 

 
.fixed_headers tbody::-webkit-scrollbar { 
 
    width: 8px; 
 
} 
 

 
.fixed_headers tbody::-webkit-scrollbar-thumb { 
 
    border-radius: 10px; 
 
    background: #f00; 
 
}

<table class="fixed_headers"> 
 
    <thead> 
 
    <tr> 
 
     <th>DATA</th> 
 
     <th>NOME COMPLETO</th> 
 
     <th>TELEFONE</th> 
 
     <th>PRÊMIO</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Source

2017-03-02 Humaira Naaz

supprimer'Affichage: block' de '.fixed_headers' parce qu'il est la table – disstruct

ajouter css

thead { 
    width: 100%; 
    float: left; 
}

Source

2017-03-02 06:28:18

.fixed_headers { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    background: #ccc; 
 
    display: block; 
 
} 
 
.fixed_headers td { 
 
    border-bottom: 1px solid #f00; 
 
} 
 

 

 
.fixed_headers tr{ 
 
    display: flex !important; 
 
    width: 100%; 
 
    
 
} 
 

 
.fixed_headers thead { 
 
    background-color: #f00; 
 
    color: #fdfdfd; 
 
    width:100%; 
 
    float:left; 
 
} 
 

 
.fixed_headers td:nth-child(1), 
 
.fixed_headers th:nth-child(1) { 
 
    min-width: 20%; 
 
} 
 
.fixed_headers td:nth-child(2), 
 
.fixed_headers th:nth-child(2) { 
 
    min-width: 30%; 
 
} 
 
.fixed_headers td:nth-child(3), 
 
.fixed_headers th:nth-child(3) { 
 
    width: 20%; 
 
} 
 
.fixed_headers td:nth-child(4), 
 
.fixed_headers th:nth-child(4) { 
 
    width: 30%; 
 
} 
 
table.fixed_headers thead tr { 
 
    display: block; 
 
    position: relative; 
 
} 
 
table.fixed_headers tbody { 
 
    display: block; 
 
    overflow: auto; 
 
    width: 100%; 
 
    height: 300px; 
 
} 
 

 
.fixed_headers tbody::-webkit-scrollbar { 
 
    width: 8px; 
 
} 
 

 
.fixed_headers tbody::-webkit-scrollbar-thumb { 
 
    border-radius: 10px; 
 
    background: #f00; 
 
}

<table class="fixed_headers"> 
 
    <thead> 
 
    <tr> 
 
     <th>DATA</th> 
 
     <th>NOME COMPLETO</th> 
 
     <th>TELEFONE</th> 
 
     <th>PRÊMIO</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>15/01</td> 
 
     <td>Castello Branco</td> 
 
     <td>(21) 99612-xxx</td> 
 
     <td>1000 REAIS</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Source

2017-03-02 06:43:36

TH ne fonctionne pas dans l'en-tête fixe Table

Répondre

Questions connexes