Comment faire en sorte que l'en-tête du tableau ne bouge pas en HTML-tutoriel HTML-php.cn

Comment faire en sorte que l'en-tête du tableau ne bouge pas en HTML

藏色散人

Libérer： 2021-06-03 11:05:06

original

3970 Les gens l'ont consulté

Comment obtenir un en-tête de tableau fixe en HTML : Tout d'abord, contrôlez la zone dans laquelle le contenu doit défiler dans la balise tbody, et ajoutez le style "overflow-y: auto;" -layout:" à la balise tr.fixed;" pour corriger l'en-tête.

Comment faire en sorte que l'en-tête du tableau ne bouge pas en HTML

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Tableau HTML, en-tête fixe du corps et barre de défilement

Tableau CSS pur, effet de défilement du corps fixe

En raison des besoins du projet, dans le tableau , lorsque la quantité de données augmente, des barres de défilement apparaissent et pendant le processus de défilement, l'en-tête du tableau défile avec le contenu du tableau par défaut, ce qui entraîne le fait que les noms de champs correspondant à l'en-tête ne peuvent pas être vus, ce qui affecte le expérience!

Idée d'implémentation :

Contrôlez la zone où le contenu doit défiler dans la balise tbody, ajoutez overflow-y: auto ; , et donnez la balise tr Ajoutez le style table-layout:fixed; (c'est le noyau) Puisque le corps a une barre de défilement, la barre de défilement doit également occuper de l'espace, ce qui entraînera un mauvais alignement du corps et de la tête. Par conséquent, lors de la définition de la largeur du tbody, la barre de défilement doit être La largeur est également ajoutée [Si vous ne souhaitez pas afficher la barre de défilement, vous pouvez définir la largeur de la barre de défilement sur 0px, et la barre de défilement le fera disparaître.

Ce qui suit est le rendu, et l'exemple de code complet spécifique est également ci-dessous :

Comment faire en sorte que len-tête du tableau ne bouge pas en HTML

L'exemple de code complet :

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>纯CSS table表格 thead固定 tbody滚动</title>
    <style>
        .table-box {
            margin: 100px auto;
            width: 1024px;
        }
 
        /* 滚动条宽度 */
        ::-webkit-scrollbar {
            width: 8px;
            background-color: transparent;
        }
 
        /* 滚动条颜色 */
        ::-webkit-scrollbar-thumb {
            background-color: #27314d;
        }
 
        table {
            width: 100%;
            border-spacing: 0px;
            border-collapse: collapse;
        }
 
        table caption{
            font-weight: bold;
            font-size: 24px;
            line-height: 50px;
        }
 
        table th, table td {
            height: 50px;
            text-align: center;
            border: 1px solid gray;
        }
 
        table thead {
            color: white;
            background-color: #38F;
        }
 
        table tbody {
            display: block;
            width: calc(100% + 8px); /*这里的8px是滚动条的宽度*/
            height: 300px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
 
        table tfoot {
            background-color: #71ea71;
        }
 
        table thead tr, table tbody tr, table tfoot tr {
            box-sizing: border-box;
            table-layout: fixed;
            display: table;
            width: 100%;
        }
 
        table tbody tr:nth-of-type(odd) {
            background: #EEE;
        }
 
        table tbody tr:nth-of-type(even) {
            background: #FFF;
        }
 
        table tbody tr td{
            border-bottom: none;
        }
 
    </style>
</head>
 
<body>
    <section>
        <table cellpadding="0" cellspacing="0">
            <caption>纯CSS table表格 thead固定 tbody滚动</caption>
            
            <thead>
                <tr>
                    <th>序 号</th>
                    <th>姓 名</th>
                    <th>年 龄</th>
                    <th>性 别</th>
                    <th>手 机</th>
                </tr>
            </thead>
 
            <tbody>
                <tr>
                    <td>001</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>004</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>005</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>006</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>007</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>008</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
            </tbody>
 
            <tfoot>
                <tr>
                    <td colspan="5">【table，thead，tbody，tfoot】 colspan：合并行， rowspan：合并列 </td>
                </tr>
            </tfoot>
        </table>
    </section>
</body>
 
</html>

Copier après la connexion

[Apprentissage recommandé : tutoriel vidéo html]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!