HTML + CSS로 헤더 고정 테이블 만들기

HTML + CSS로 헤더 고정 테이블 만들기 | position: sticky 활용법

스크롤 시 헤더가 고정되는 테이블 만들기 (Sticky Table Header)

많은 데이터를 한 화면에 보여줄 때 열 제목이 사라지면 사용성에 큰 불편이 생깁니다. 이 문서에서는 CSS의 position: sticky;를 활용해 헤더를 항상 보이게 하는 방법을 단계별로 설명합니다. 실제 예제와 함께 따라하면 금방 적용할 수 있으며, 특히 "HTML + CSS로 헤더 고정 테이블 만들기 | position: sticky 활용법"을 적용하면 표 탐색이 훨씬 수월해집니다.

💡 기본 원리

핵심은 <thead>의 셀에 position: sticky;와 top: 0;을 적용하고, 헤더를 감싸는 부모 컨테이너에는 스크롤이 가능하도록 overflow-y: auto;를 설정하는 것입니다. 한 문장으로 정리하면: 헤더는 sticky로 고정하고, 스크롤 컨테이너가 있어야 정상 동작합니다. 다만 부모 요소에 overflow: hidden;이나 일부 레이아웃 상황에서는 sticky가 무시될 수 있으니 주의하세요. 이 방식은 "HTML + CSS로 헤더 고정 테이블 만들기 | position: sticky 활용법"을 이해하는 데 핵심 개념입니다.

🧩 CSS 코드


.tableFixHead {
  overflow-y: auto; /* 세로 스크롤 가능 */
  height: 400px;    /* 테이블 높이 설정 */
}

.tableFixHead thead th {
  position: sticky; /* 고정 위치 */
  top: 0;           /* 상단 기준으로 고정 */
  background-color: #f8f8f8; /* 헤더 배경색 (가독성 향상) */
  z-index: 2;       /* 헤더가 셀 위로 올라오도록 설정 */
}

🧱 HTML 예제


<div class="tableFixHead">
  <table border="1" cellpadding="8" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>번호</th>
        <th>이름</th>
        <th>직책</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>홍길동</td><td>개발자</td></tr>
      <tr><td>2</td><td>이몽룡</td><td>디자이너</td></tr>
      <tr><td>3</td><td>성춘향</td><td>기획자</td></tr>
      <tr><td>4</td><td>변학도</td><td>PM</td></tr>
      <tr><td>5</td><td>임꺽정</td><td>테스터</td></tr>
      <tr><td>6</td><td>강감찬</td><td>운영자</td></tr>
      <tr><td>7</td><td>을지문덕</td><td>DB관리자</td></tr>
      <tr><td>8</td><td>장보고</td><td>마케터</td></tr>
      <tr><td>9</td><td>김유신</td><td>데이터 분석가</td></tr>
      <tr><td>10</td><td>최무선</td><td>AI 엔지니어</td></tr>
    </tbody>
  </table>
</div>

🎯 주의사항

부모 요소에 overflow: hidden;이 선언되어 있으면 sticky가 동작하지 않습니다. 컨테이너의 오버플로우 속성을 먼저 확인하세요.
th에 배경색을 지정하지 않으면, 겹침 현상 때문에 헤더가 투명하게 보일 수 있습니다. 배경을 설정해 가독성을 확보하세요.
스크롤 가능한 영역은 height를 명확히 지정해야 합니다. 높이를 주지 않으면 스크롤이 생성되지 않아 sticky 효과를 확인할 수 없습니다.

🚀 정리

간단한 CSS만으로도 사용자에게 친숙한 테이블을 만들 수 있습니다. 이 가이드의 예제를 적용하면 데이터 목록, 로그 뷰, 가격표 등에서 헤더를 항상 표시할 수 있습니다. 요약하면, "HTML + CSS로 헤더 고정 테이블 만들기 | position: sticky 활용법"은 적은 코드 변경으로 큰 사용성 개선을 가져오는 실용적인 방법입니다.

🚀 이 주제, 우리 서비스에 어떻게 적용할까요?

HTML + CSS로 헤더 고정 테이블 만들기 | position: sticky 활용법를 실제 서비스와 조직에 녹여보고 싶다면, 현재 아키텍처와 운영 방식을 한 번 점검해 보는 것부터 시작해 보세요. 팀 위키나 기술 블로그, 사내 스터디 주제로도 아주 좋습니다.

이 글이 도움이 됐다면, 비슷한 엔터프라이즈 사례 글들도 함께 살펴보면서 우리 조직에 맞는 운영 상용구를 정의해 보세요.

Java Servlet Request Parameter 완전 정복 — GET/POST 모든 파라미터 확인 & 디버깅 예제 (Request Parameter 전체보기)

Java Servlet Request Parameter 완전 정복 — GET/POST 모든 파라미터 확인 & 디버깅 예제 Java Servlet Request Parameter 완전 정복 웹 애플리케이션에서 클라이언트로부터 전달되는 Request Parameter 를 확인하는 것은 필수입니다. 이 글에서는 Java Servlet 과 JSP 에서 GET/POST 요청 파라미터를 전체 출력하고 디버깅하는 방법을 다양한 예제와 함께 소개합니다. 1. 기본 예제: getParameterNames() 사용 Enumeration<String> params = request.getParameterNames(); System.out.println("----------------------------"); while (params.hasMoreElements()){ String name = params.nextElement(); System.out.println(name + " : " + request.getParameter(name)); } System.out.println("----------------------------"); 위 코드는 요청에 포함된 모든 파라미터 이름과 값을 출력하는 기본 방법입니다. 2. HTML Form과 연동 예제 <form action="CheckParamsServlet" method="post"> 이름: <input type="text" name="username"><br> 이메일: <input type="email" name="email"><b...

PostgreSQL 달력(일별,월별)

SQL 팁: GENERATE_SERIES로 일별, 월별 날짜 목록 만들기 SQL 팁: GENERATE_SERIES 로 일별, 월별 날짜 목록 만들기 데이터베이스에서 통계 리포트를 작성하거나 비어있는 날짜 데이터를 채워야 할 때, 특정 기간의 날짜 목록이 필요할 수 있습니다. PostgreSQL과 같은 데이터베이스에서는 GENERATE_SERIES 함수를 사용하여 이 작업을 매우 간단하게 처리할 수 있습니다. 1. 🗓️ 일별 날짜 목록 생성하기 2020년 1월 1일부터 12월 31일까지의 모든 날짜를 '1 day' 간격으로 생성하는 쿼리입니다. WITH date_series AS ( SELECT DATE(GENERATE_SERIES( TO_DATE('2020-01-01', 'YYYY-MM-DD'), TO_DATE('2020-12-31', 'YYYY-MM-DD'), '1 day' )) AS DATE ) SELECT DATE FROM date_series 이 쿼리는 WITH 절(CTE)을 사용하여 date_series 라는 임시 테이블을 만들고, GENERATE_SERIES 함수로 날짜를 채웁니다. 결과 (일별 출력) 2. 📅 월별 날짜 목록 생성하기 동일한 원리로, 간격을 '1 MONTH' 로 변경하면 월별 목록을 생성할 수 있습니다. TO...

CSS로 레이어 팝업 화면 가운데 정렬하는 방법 (top·left·transform 완전 정리)

레이어 팝업 센터 정렬, 이 코드만 알면 끝 (CSS 예제 포함) 이벤트 배너나 공지사항을 띄울 때 레이어 팝업(center 정렬) 을 깔끔하게 잡는 게 생각보다 어렵습니다. 화면 크기가 변해도 가운데에 고정되고, 모바일에서도 자연스럽게 보이게 하려면 position , top , left , transform 을 정확하게 이해해야 합니다. 이 글에서는 아래 내용을 예제로 정리합니다. 레이어 팝업(center 정렬)의 기본 개념 자주 사용하는 position: absolute / fixed 정렬 방식 질문에서 주신 스타일 top: 3.25%; left: 50%; transform: translateX(-50%) 의 의미 실무에서 바로 쓰는 반응형 레이어 팝업 HTML/CSS 예제 1. 레이어 팝업(center 정렬)이란? 레이어 팝업(레이어 팝업창) 은 새 창을 띄우는 것이 아니라, 현재 페이지 위에 div 레이어를 띄워서 공지사항, 광고, 이벤트 등을 보여주는 방식을 말합니다. 검색엔진(SEO) 입장에서도 같은 페이지 안에 HTML이 존재 하기 때문에 팝업 안의 텍스트도 정상적으로 인덱싱될 수 있습니다. 즉, “레이어 팝업 센터 정렬”, “레이어 팝업 만드는 방법”과 같이 관련 키워드를 적절히 넣어주면 검색 노출에 도움이 됩니다. 2. 질문에서 주신 레이어 팝업 스타일 분석 질문에서 주신 스타일은 다음과 같습니다. <div class="layer-popup" style="width:1210px; z-index:9001; position:absolute; top:3.25%; left:50%; transform:translateX(-50%);"> 레이어 팝업 내용 <...

이 블로그 검색