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는 헤더가 테이블 본문 위에 표시되도록 합니다.
고정된 왼쪽 열:
첫 번째 열은
위치: 고정 및 왼쪽: 0 속성은 가로로 스크롤하는 동안 열이 제자리에 유지되도록 합니다.
Z-인덱스 값은 열의 셀(5)과 헤더(6)를 구분하여 적절한 레이어링을 보장합니다.
고정된 기둥 강조 표시:
고정된 열의 배경색은 빨간색으로 설정되었으며, 더 나은 가시성을 위해 흰색 텍스트가 사용되었습니다. 원하는 디자인에 맞게 맞춤 설정할 수 있습니다.
함께 작동하는 방법
세로로 스크롤하면 위치: 고정 헤더가 .table-container 상단에 유지됩니다.
가로로 스크롤할 때 가장 왼쪽 열이 고정되어 고정된 열 효과가 나타납니다.
오버플로: 자동과 위치: 고정의 조합은 테이블이 두 축 모두에서 기능적이고 사용자 친화적인 상태를 유지하도록 보장합니다.
추가할 수 있는 개선 사항
반응형 조정:
미디어 쿼리를 사용하여 작은 화면에 맞게 열 너비와 테이블 레이아웃을 조정하세요.
동적 콘텐츠 로딩:
대규모 데이터 세트의 경우 JavaScript를 사용하여 행을 동적으로 가져와 채울 수 있습니다.
대화형 기능:
JavaScript를 사용하여 행 클릭 이벤트, 필터링 또는 정렬을 추가하여 기능을 강화합니다.
최종 생각
표준
