Comment créer un tableau d'en-tête fixe dans un div défilant ?-tutoriel CSS-php.cn

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

Mary-Kate Olsen

Libérer： 2024-11-17 01:58:03

original

186 Les gens l'ont consulté

How to Create a Fixed Header Table Inside a Scrollable Div?

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>

Copier après la connexion

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;
}

Copier après la connexion

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!