HTML 테이블을 스크롤 가능하게 만들기

긴 HTML 테이블이 페이지를 늘리지 않게 하려면 의미 구조를 갖춘 테이블을 높이가 제한된 래퍼 안에 넣고 overflow-y: auto를 설정하세요. 내용이 제한 높이보다 길어지면 래퍼 안에서 세로로 스크롤되며, 테이블의 일반적인 행과 열 구조는 그대로 유지됩니다.

CSS로 HTML 테이블을 세로 스크롤 가능하게 만들기

이 전체 페이지 예제는 높이가 200픽셀로 제한된 래퍼와 머리글 및 본문이 있는 기본 HTML 테이블을 사용합니다. 행이 래퍼의 높이를 넘도록 구성되어 있어 테이블 영역 안에서 스크롤할 수 있습니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Scrollable table</title>
  <style>
    .table-scroll {
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid #ccc;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 8px;
      border: 1px solid #ddd;
      text-align: left;
    }
  </style>
</head>
<body>
  <div class="table-scroll" role="region" aria-label="Employee directory" tabindex="0">
    <table>
      <thead>
        <tr><th scope="col">Name</th><th scope="col">Age</th><th scope="col">Country</th></tr>
      </thead>
      <tbody>
        <tr><td>John Doe</td><td>30</td><td>USA</td></tr>
        <tr><td>Jane Smith</td><td>25</td><td>Canada</td></tr>
        <tr><td>Sam Wilson</td><td>28</td><td>UK</td></tr>
        <tr><td>Emily Johnson</td><td>35</td><td>Australia</td></tr>
        <tr><td>Michael Brown</td><td>40</td><td>Germany</td></tr>
        <tr><td>Linda Davis</td><td>22</td><td>France</td></tr>
        <tr><td>James Garcia</td><td>29</td><td>Spain</td></tr>
        <tr><td>Patricia Martinez</td><td>31</td><td>Mexico</td></tr>
        <tr><td>Robert Wilson</td><td>38</td><td>Italy</td></tr>
        <tr><td>Jessica Lee</td><td>27</td><td>Netherlands</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

max-height는 래퍼의 높이를 제한하고, overflow-y는 테이블이 그보다 길 때의 동작을 제어합니다. tabindex="0"을 사용하면 키보드로 해당 영역에 접근할 수 있습니다. 영역에 포커스를 둔 뒤 화살표 키로 스크롤되는지 확인하세요. 영역 레이블은 보조 기술에 해당 영역의 맥락을 알려 줍니다. 브라우저와 보조 기술이 테이블의 관계를 파악할 수 있도록 <table>, <thead>, <tbody>와 머리글 셀을 유지하세요.

세로 오버플로에는 auto 또는 scroll 선택하기

내용이 래퍼의 경계를 넘어갈 때 필요한 경우에만 스크롤바를 표시하려면 overflow-y: auto를 사용하세요. 행이 래퍼 안에 들어갈 때는 스크롤바 공간을 미리 차지하지 않습니다. overflow-y: scroll은 내용이 현재 래퍼에 모두 들어가더라도 스크롤 메커니즘을 요청합니다. 다만 스크롤바가 실제로 보이는지는 운영체제와 브라우저에 따라 다릅니다. 두 경우 모두 오버플로 규칙은 개별 행이 아니라 래퍼에 설정하세요. 세로 제한을 만들려면 높이나 최대 높이가 필요합니다. 이를 지정하지 않으면 래퍼가 테이블에 맞춰 늘어나 내부 세로 스크롤이 필요하지 않을 수 있습니다.

래퍼 규칙을 빠르게 복사하려면 아래 JavaScript 예제를 실행하세요. 앞에서 사용한 CSS 선언을 출력하며, 표시 영역에 맞게 높이를 조정할 수 있습니다.

const rule = [
  ".table-scroll {",
  "  max-height: 200px;",
  "  overflow-y: auto;",
  "}"
].join("\n");
console.log(rule);

.table-scroll {
  max-height: 200px;
  overflow-y: auto;
}

테이블 의미 구조와 키보드 접근성 유지하기

표 형식의 데이터에는 일반 CSS Grid 셀을 대신 사용하지 말고 실제 테이블 요소를 사용하세요. Grid는 레이아웃에 유용하지만, 여러 div 요소만으로는 데이터 테이블의 머리글과 셀 사이 관계가 자동으로 제공되지 않습니다. 예제는 스크롤 가능한 래퍼에 영역 레이블을 지정하고 탭 순서에 포함합니다. 키보드로 확인하려면 Tab 키를 눌러 레이블이 지정된 영역으로 이동하고, 화살표 키로 스크롤한 다음 Tab 키를 계속 눌러 보세요. 기본 테이블 의미를 이미 제공하는 HTML 테이블에 ARIA 테이블 역할을 추가하지 마세요.

가로 스크롤과 Bootstrap 스타일 추가하기

사용 가능한 공간보다 열이 넓다면 .table-scroll에 overflow-x: auto를 추가하세요. 그러면 래퍼 안에서 세로뿐 아니라 가로로도 스크롤할 수 있습니다. 텍스트가 읽기 어려울 정도로 좁아지게 만들기보다 각 열에 필요한 너비를 유지하세요. 실제 테이블을 사용할 좁은 화면 크기에서 페이지를 확인하고 모든 열에 접근할 수 있는지 살펴보세요.

프로젝트에서 이미 Bootstrap을 불러온 경우 table, table-bordered 같은 클래스로 동일한 의미 구조의 테이블을 꾸밀 수 있습니다. 이 클래스는 표시 방식에 영향을 줍니다. 스크롤 동작은 높이가 제한된 래퍼와 CSS 오버플로 규칙이 계속 담당합니다. 이렇게 하면 스크롤 동작을 명확하게 설정하면서 Bootstrap 사용 여부와 관계없이 테이블 마크업을 유용하게 유지할 수 있습니다.