고정 헤더 스크롤 가능 테이블을 만드는 방법: 두 테이블 접근 방식?

고정 헤더 스크롤 가능 테이블을 만드는 방법

스크롤 가능 div 내에서 고정 헤더가 있는 테이블을 생성하려면 창의적인 접근 방식이 필요합니다. 이를 달성하는 방법은 다음과 같습니다.

제공하신 코드는 CSS를 사용하여 헤더의 위치를 ​​절대적으로 지정하여 고정된 위치를 생성합니다. 그러나 이 접근 방식은 스크롤을 제한하고 테이블이 스크롤 가능한 div의 높이를 초과하면 중단됩니다.

더 나은 해결책은 두 개의 별도 테이블을 사용하는 것입니다. 하나는 헤더용이고 다른 하나는 데이터 셀용입니다. 헤더 테이블은 정적으로 위치해야 하고, 데이터 테이블은 높이가 고정되고 Overflow-y가 자동으로 설정된 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><%=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;
}

이 접근 방식에서는 정적 헤더 테이블이 항상 표시되는 반면, 데이터 테이블은 고정 높이 스크롤 가능 div 내에서 부드럽게 스크롤됩니다. 데이터 테이블에 고정된 테이블 레이아웃은 셀의 너비가 동일하도록 보장하고 긴 문자열이 발생할 때 테이블이 깨지는 것을 방지합니다. 또한 텍스트 오버플로가 있는 요소를 사용하면 셀 내용이 줄바꿈 없이 깔끔하게 표시됩니다.

이 방법은 테이블 기능과 시각적 미학을 모두 유지하므로 고정 헤더 스크롤 가능 테이블을 효과적으로 만들 수 있습니다.

위 내용은 고정 헤더 스크롤 가능 테이블을 만드는 방법: 두 테이블 접근 방식?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!