Comment créer un tableau défilant à en-tête fixe : approche à deux tableaux ?

Comment créer un tableau défilant à en-tête fixe

La création d'un tableau avec un en-tête fixe dans un div défilant nécessite une approche créative. Voici comment y parvenir :

Le code que vous avez fourni utilise CSS pour positionner l'en-tête de manière absolue, créant ainsi une position fixe. Cependant, cette approche limite le défilement et s'interrompra lorsque le tableau dépasse la hauteur du div défilant.

Une meilleure solution consiste à utiliser deux tableaux distincts : un pour l'en-tête et un pour les cellules de données. La table d'en-tête doit être positionnée de manière statique, tandis que la table de données doit être placée à l'intérieur d'un div avec une hauteur fixe et un débordement défini sur auto.

Code mis à jour :

<div class="table-wrapper">
  <table class="table-header">
    <thead>
      <tr>
        <th>Order ID</th>
        <th>Order Date</th>
        <th>Status</th>
        <th>Vol Number</th>
        <th>Bonus Paid</th>
        <th>Reason for no Bonus</th>
      </tr>
    </thead>
  </table>
  <div class="table-scroll">
    <table class="table-data">
      <tbody>
        <tr>
          <td><span><%=snd.getOrderId()%></span></td>
          <td><span><%=snd.getDateCaptured()%></span></td>
          <td><span><%=snd.getOrderStatus()%></span></td>
          <td>Data Not Available</td>
          <td>Data Not Available</td>
          <td>Data Not Available</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

.table-wrapper {
  position: relative;
  width: 100%;
}

.table-header {
  position: static;
  width: 100%;
  table-layout: fixed;
}

.table-scroll {
  height: 250px;
  width: 100%;
  overflow-y: auto;
}

.table-scroll table {
  width: 100%;
}

.table-data {
  table-layout: fixed;
}

.table-data tr td {
  padding: 5px;
  border: 1px solid #eee;
  width: 100px;
}

.table-data tr td span {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Dans cette approche, la table d'en-tête statique sera toujours visible, tandis que la table de données défilera en douceur dans le div défilant à hauteur fixe. La disposition du tableau fixée sur le tableau de données garantit que les cellules ont une largeur égale et empêche la rupture du tableau lors de la rencontre de longues chaînes. De plus, l'utilisation de les éléments avec débordement de texte garantissent que le contenu des cellules est affiché proprement sans retour à la ligne.

Cette méthode conserve à la fois la fonctionnalité du tableau et l'esthétique visuelle, vous permettant de créer efficacement des tableaux défilants à en-tête fixe.

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!