Comment créer un en-tête fixe et un tableau à première colonne fixe en utilisant uniquement CSS ?-tutoriel CSS-php.cn

Comment créer un en-tête fixe et un tableau à première colonne fixe en utilisant uniquement CSS ?

Patricia Arquette

Libérer： 2024-12-17 08:48:25

original

844 Les gens l'ont consulté

How to Create a Fixed Header and Fixed First Column Table Using Only CSS?

Comment créer un tableau avec un en-tête et une colonne fixes en utilisant uniquement CSS

Problème

Dans le but d'afficher les données de manière organisée , vous souhaitez créer un tableau HTML comportant à la fois un en-tête fixe et une première colonne fixe. Pourtant, votre exploration a découvert une gamme de solutions qui dépendent de JavaScript ou de jQuery, introduisant des inconvénients potentiels sur les navigateurs mobiles en raison d'un comportement de défilement loin d'être idéal. Par conséquent, votre recherche se concentre désormais sur la recherche d'une solution CSS pure.

Solution

Heureusement, la propriété position : sticky, prise en charge dans les versions modernes de Chrome, Firefox et Edge, offre un moyen de obtenir le comportement souhaité. Vous pouvez le combiner avec la propriété overflow: scroll pour créer un tableau dynamique avec des éléments d'en-tête et de colonne fixes.

Étapes

Conteneur : Commencez par placer votre table à l'intérieur d'un div parent et en appliquant un débordement : faites défiler jusqu'au div, permettant ainsi le défilement.
En-tête et colonne Stickiness : exploitez la propriété position : sticky ainsi que les valeurs haut, droite ou gauche pour spécifier les bords auxquels les éléments du tableau doivent adhérer.
Stickiness de l'en-tête de première colonne : utilisez la propriété thead th:first-child pour garantir que l'en-tête de la première colonne reste fixé à gauche bord.

Exemple

Marquage HTML :

<div class="container">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
    </tbody>
  </table>
</div>

Copier après la connexion

CSS :

div {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
}

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
}

thead th:first-child {
  left: 0;
  z-index: 2;
}

thead th {
  background: #000;
  color: #FFF;
  z-index: 1;
}

tbody th {
  background: #FFF;
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

table {
  border-collapse: collapse;
}

td,
th {
  padding: 0.5em;
}

Copier après la connexion

Cette implémentation vous permet de faire défiler à la fois verticalement et horizontalement tout en gardant l'en-tête et la première colonne en place, offrant une expérience utilisateur améliorée pour visualiser les données tabulaires.

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!