固定ヘッダーのスクロール可能なテーブルを作成する方法: 2 つのテーブルのアプローチ?

固定ヘッダーのスクロール可能なテーブルを作成する方法

スクロール可能な div 内に固定ヘッダーを持つテーブルを作成するには、創造的なアプローチが必要です。これを実現する方法は次のとおりです。

あなたが提供したコードは、CSS を使用してヘッダーを絶対的に配置し、固定位置を作成します。ただし、この方法ではスクロールが制限され、テーブルがスクロール可能な div の高さを超えると中断されます。

より良い解決策は、ヘッダー用とデータ セル用の 2 つの別々のテーブルを使用することです。ヘッダー テーブルは静的に配置する必要がありますが、データ テーブルは高さを固定し、overflow-y を auto に設定して div 内に配置する必要があります。

更新コード:

<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></span></td>
          <td><span></span></td>
          <td><span></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;
}

このアプローチでは、静的ヘッダー テーブルが常に表示され、データ テーブルは固定高のスクロール可能な div 内でスムーズにスクロールします。データ テーブルに固定されたテーブル レイアウトにより、セルの幅が均等になり、長い文字列が発生したときにテーブルが破損するのを防ぎます。さらに、 を使用すると、 text-overflow 要素を使用すると、セルの内容が折り返されずにきれいに表示されます。

この方法では、テーブルの機能と見た目の美しさの両方が維持され、固定ヘッダーのスクロール可能なテーブルを効果的に作成できます。

以上が固定ヘッダーのスクロール可能なテーブルを作成する方法: 2 つのテーブルのアプローチ?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。