Wie erstelle ich eine scrollbare Tabelle mit festem Header: Zwei-Tabellen-Ansatz?

So erstellen Sie eine scrollbare Tabelle mit festem Header

Das Erstellen einer Tabelle mit festem Header innerhalb eines scrollbaren Div erfordert einen kreativen Ansatz. So erreichen Sie das:

Der von Ihnen bereitgestellte Code verwendet CSS, um den Header absolut zu positionieren und so eine feste Position zu erstellen. Dieser Ansatz schränkt jedoch das Scrollen ein und bricht ab, wenn die Tabelle die Höhe des scrollbaren Div überschreitet.

Eine bessere Lösung besteht darin, zwei separate Tabellen zu verwenden: eine für die Kopfzeile und eine für die Datenzellen. Die Header-Tabelle sollte statisch positioniert werden, während die Datentabelle in einem Div mit fester Höhe und Überlauf-Y auf „Auto“ platziert werden sollte.

Aktualisierter Code:

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

Bei diesem Ansatz ist die statische Header-Tabelle immer sichtbar, während die Datentabelle reibungslos innerhalb des scrollbaren Divs mit fester Höhe scrollt. Das auf der Datentabelle festgelegte Tabellenlayout stellt sicher, dass die Zellen die gleiche Breite haben und verhindert, dass die Tabelle bei langen Zeichenfolgen kaputt geht. Darüber hinaus ist die Verwendung von Elemente mit Textüberlauf stellen sicher, dass der Zellinhalt ordentlich und ohne Umbruch angezeigt wird.

Diese Methode behält sowohl die Tabellenfunktionalität als auch die visuelle Ästhetik bei und ermöglicht Ihnen die effektive Erstellung scrollbarer Tabellen mit festem Kopf.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine scrollbare Tabelle mit festem Header: Zwei-Tabellen-Ansatz?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!