File "ex001.html"

Full Path: /home/analogde/www/Dev tableau/ex001.html
File size: 1.67 KB
MIME-type: text/html
Charset: utf-8

<style>

/* Conteneur pour la table avec scroll */
.table-container {
    overflow: auto;
    max-height: 500px; /* Ajuste selon la hauteur désirée de la table */
}

/* Style général de la table */
table.sticky-table {
    width: 100%;
    border-collapse: collapse;
}

/* En-têtes de table */
thead th {
    background-color: #f1f1f1;
    z-index: 10;  /* S'assurer que l'entête est au-dessus */
    position: sticky;
    top: 0;
}

/* Applique position sticky aux cellules du tbody (premières colonnes) */
tbody tr td:nth-child(1), 
tbody tr td:nth-child(2),
tbody tr td:nth-child(3) {
    position: sticky;
    background-color: white;
    z-index: 5; /* Colonne sticky au-dessus des autres lignes */
}

/* Positionnement des cellules sticky en fonction de leur ordre */
tbody tr td:nth-child(1) {
    left: 0;
}

tbody tr td:nth-child(2) {
    left: 150px;  /* Ajuster selon la largeur de la colonne */
}

tbody tr td:nth-child(3) {
    left: 300px;  /* Ajuster selon la largeur de la colonne */
}


</style>

<div class="table-container">
    <table class="sticky-table">
        <thead>
            <tr>
                <th>Colonne 1</th>
                <th>Colonne 2</th>
                <th>Colonne 3</th>
                <th>Colonne 4</th>
                <!-- Ajoute d'autres colonnes si nécessaire -->
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cellule 1</td>
                <td>Cellule 2</td>
                <td>Cellule 3</td>
                <td>Cellule 4</td>
            </tr>
            <!-- Ajoute d'autres lignes si nécessaire -->
        </tbody>
    </table>
</div>