Comment créer un tableau d'en-tête fixe dans un div défilant ?

Comment créer un tableau d'en-tête fixe à l'intérieur d'un div défilant

Pour rendre un en-tête fixe lors du défilement, il est recommandé d'utiliser deux tableaux. Un pour l'en-tête, qui reste statique, et un autre pour les cellules de contenu, enveloppés dans un div à hauteur fixe avec débordement activé.

HTML :

<div class="wrap">
    <table class="head">
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th>Head 3</th>
            </tr>
        </thead>
    </table>
    <div class="inner_table">
        <table>
        <tbody>
            <tr>
                <td>Body 1</td>
                <td>Body 2</td>
                <td>Body 3</td>
            </tr>
            <!-- More table rows here -->
        </tbody>
    </table>
    </div>
</div>

CSS :

.wrap {
    width: 352px;
}

.wrap table {
    width: 300px;
    table-layout: fixed;
}

table tr td {
    padding: 5px;
    border: 1px solid #eee;
    width: 100px;
    word-wrap: break-word;
}

table.head tr td {
    background: #eee;
}

.inner_table {
    height: 100px;
    overflow-y: auto;
}

Cette approche garantit un en-tête statique lorsque le contenu du tableau défile, empêchant le contenu d'obscurcir les noms de colonnes importants.

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!