Tiny File Manager

Back Back Up Advanced Editor

<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>
                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cellule 1</td>
                <td>Cellule 2</td>
                <td>Cellule 3</td>
                <td>Cellule 4</td>
            </tr>
            
        </tbody>
    </table>
</div>