HTML과 CSS를 사용하여 고정 헤더와 고정 열이 있는 스크롤 가능한 테이블 만들기

테이블은 구조화된 데이터를 표시하기 위한 웹 애플리케이션의 기본입니다. 스크롤 가능한 헤더 및 고정(고정) 열과 같은 기능을 추가하면 테이블을 더욱 사용자 친화적으로 만들 수 있습니다. 이 글에서는 순수 HTML과 CSS를 사용하여 고정된 헤더와 고정된 왼쪽 열이 있는 테이블을 만드는 방법을 살펴보겠습니다.

CodePen 예제

작동 중인 코드를 보려면 CodePen에서 다음 라이브 예제를 확인하세요.
이 코드 예제에서는 JS 클래스를 사용하여 테이블을 만듭니다. 원하는 프레임워크나 라이브러리를 사용하여 이를 복제할 수 있습니다.

테이블의 주요 특징

• 고정 헤더: 세로로 스크롤할 때 표 헤더가 상단에 계속 표시됩니다.
• 왼쪽 열 고정: 가로로 스크롤해도 첫 번째 열이 고정된 상태로 유지됩니다.
• 스크롤 가능한 콘텐츠: 세로 및 가로 스크롤이 모두 지원됩니다.
• 사용자 정의 가능한 스타일: 테이블 디자인은 얼룩말 줄무늬와 호버 효과로 깨끗하고 현대적입니다.

HTML 구조

우리는 헤더 및

행의 경우. 테이블은 스크롤 가능성을 위해 div로 래핑됩니다. 코드는 다음과 같습니다.

<div>



<h2>
  
  
  CSS for Sticky Header and Frozen Column
</h2>

<p>Here’s the CSS that makes the magic happen:<br>
</p>

<pre class="brush:php;toolbar:false">/* General styles */
body {
  font-family: Arial, sans-serif;
}

/* Scrollable container */
.table-container {
  border: 1px solid #e5e7eb;
  border-bottom: none;
  overflow: auto; /* Enables both horizontal and vertical scrolling */
  height: 400px; /* Limits table height for vertical scrolling */
}

/* Table layout */
.table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed; /* Ensures consistent column widths */
}

/* Table cells and headers */
.table th,
.table td {
  padding: 8px;
  text-align: center;
  border: 1px solid #e5e7eb;
}

/* Frozen first column */
.table td:nth-child(1),
.table th:nth-child(1) {
  background: red; /* Highlighted background for frozen column */
  position: sticky;
  left: 0; /* Ensures the column stays on the left */
  z-index: 5; /* Keeps the column above other cells */
  color: white;
}

/* Add higher z-index for header */
.table th:nth-child(1) {
  z-index: 6;
}

/* Sticky header */
.table th {
  background-color: #1e3a8a;
  color: white;
  font-size: 14px;
  font-weight: bold;
  position: sticky;
  top: 0; /* Makes the header stick to the top */
  z-index: 2; /* Keeps the header above the table body */
}

/* Styling for table body */
.table td {
  font-size: 14px;
  color: #6b7280;
}

/* Zebra striping for rows */
.table tr:nth-child(odd) {
  background-color: #f9fafb;
}

/* Hover effect for rows */
.table tr:hover {
  background-color: rgba(14, 116, 144, 0.1);
}

/* No data row styling */
.no-data {
  text-align: center;
  font-size: 14px;
  color: #9ca3af;
}

CSS 설명

스크롤 가능한 컨테이너:

.table-container 클래스는 수평 및 수직 스크롤을 모두 활성화하기 위해 Overflow: auto를 추가합니다. height: 400px 속성은 테이블 높이를 제한하여 더 큰 데이터 세트에 대해 세로 스크롤을 보장합니다.

고정 헤더:

세로 스크롤 중에도 헤더가 계속 표시되도록 하기 위해 위치: 고정 및 상단: 0 속성이 요소에 적용됩니다.
z-index: 2는 헤더가 테이블 본문 위에 표시되도록 합니다.

고정된 왼쪽 열:

첫 번째 열은

에 대한 nth-child(1) 선택기를 사용하여 스타일이 지정되었습니다. 그리고 .
위치: 고정 및 왼쪽: 0 속성은 가로로 스크롤하는 동안 열이 제자리에 유지되도록 합니다.
Z-인덱스 값은 열의 셀(5)과 헤더(6)를 구분하여 적절한 레이어링을 보장합니다.

고정된 기둥 강조 표시:

고정된 열의 배경색은 빨간색으로 설정되었으며, 더 나은 가시성을 위해 흰색 텍스트가 사용되었습니다. 원하는 디자인에 맞게 맞춤 설정할 수 있습니다.

함께 작동하는 방법

세로로 스크롤하면 위치: 고정 헤더가 .table-container 상단에 유지됩니다.
가로로 스크롤할 때 가장 왼쪽 열이 고정되어 고정된 열 효과가 나타납니다.
오버플로: 자동과 위치: 고정의 조합은 테이블이 두 축 모두에서 기능적이고 사용자 친화적인 상태를 유지하도록 보장합니다.

추가할 수 있는 개선 사항

반응형 조정:
미디어 쿼리를 사용하여 작은 화면에 맞게 열 너비와 테이블 레이아웃을 조정하세요.

동적 콘텐츠 로딩:

대규모 데이터 세트의 경우 JavaScript를 사용하여 행을 동적으로 가져와 채울 수 있습니다.

대화형 기능:

JavaScript를 사용하여 행 클릭 이벤트, 필터링 또는 정렬을 추가하여 기능을 강화합니다.

최종 생각

표준

요소와 몇 줄의 CSS를 사용하여 고정된 헤더와 고정된 왼쪽 열이 있는 강력하고 반응성이 뛰어난 테이블을 만들었습니다. 이 접근 방식은 가볍고 구현하기 쉬우며 최신 브라우저에서 원활하게 작동합니다.

대시보드를 구축하든, 보고서를 표시하든, 대규모 데이터세트를 처리하든 이 방법을 사용하면 사용자 친화적이면서도 깔끔하고 전문적인 디자인이 보장됩니다. 사용해 보시고 귀하의 프로젝트에 어떻게 적용되는지 알려주세요! ?