CSS로 반응형 테이블 만드는 방법 완벽 가이드

화면이 좁은 모바일 기기에서도 표가 깨지지 않고 자연스럽게 보이도록 하려면 반응형 테이블(Responsive Table)을 구현해야 합니다. CSS만으로 아주 간단하게 만들 수 있는데, 핵심은 overflow-x: auto 속성입니다.

반응형 테이블의 원리

테이블을 <div> 같은 컨테이너 요소로 감싸고, 해당 컨테이너에 overflow-x: auto를 적용하면 화면 너비보다 테이블이 클 경우 가로 스크롤바가 자동으로 생성됩니다. 이렇게 하면 열이 많은 테이블도 모바일 환경에서 내용을 잘라내거나 뭉개지 않고 그대로 확인할 수 있습니다.

주요 CSS 속성 정리

overflow-x: auto — 콘텐츠가 컨테이너를 벗어나면 가로 스크롤바를 표시합니다.
border-collapse: collapse — 인접한 셀의 테두리를 하나로 합쳐 깔끔한 외곽선을 만듭니다.
width: 100% — 테이블이 부모 요소의 전체 너비를 차지하도록 설정합니다.
tr:nth-child(even) — 짝수 행에 배경색을 지정해 가독성을 높입니다(줄무늬 효과).

전체 예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    div {
        overflow-x: auto;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        border: 1px solid rgb(0, 0, 0);
    }
    th, td {
        text-align: left;
        padding: 8px;
    }
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
</style>
</head>
<body>
<h1>반응형 테이블 예제</h1>
<div>
<table>
<tr>
<th>이름</th>
<th>성</th>
<th>점수</th>
<th>점수</th>
<th>점수</th>
<th>점수</th>
<th>점수</th>
<th>점수</th>
<th>점수</th>
<th>점수</th>
<th>점수</th>
<th>점수</th>
</tr>
<tr>
<td>JACK</td>
<td>ROY</td>
<td>50</td>
<td>60</td>
<td>10</td>
<td>20</td>
<td>40</td>
<td>50</td>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
</tr>
<tr>
<td>Evelyn</td>
<td>Monroe</td>
<td>24</td>
<td>14</td>
<td>22</td>
<td>44</td>
<td>55</td>
<td>44</td>
<td>11</td>
<td>55</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>Joe</td>
<td>Anderson</td>
<td>54</td>
<td>22</td>
<td>99</td>
<td>55</td>
<td>91</td>
<td>61</td>
<td>81</td>
<td>11</td>
<td>22</td>
<td>55</td>
</tr>
</table>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같이 전체 너비를 채운 테이블이 출력됩니다.

CSS로 반응형 테이블 만드는 방법 완벽 가이드

창 크기 조절 시 동작

브라우저 창의 너비를 줄이면 테이블이 컨테이너보다 넓어지면서 아래와 같이 가로 스크롤바가 나타납니다. 사용자는 스크롤을 좌우로 움직여 숨겨진 열까지 모두 확인할 수 있습니다.

CSS로 반응형 테이블 만드는 방법 완벽 가이드

추가 팁

모바일 사용성을 더욱 높이고 싶다면 다음 방법들도 고려해 보세요.

-webkit-overflow-scrolling: touch — iOS에서 부드러운 스크롤 경험을 제공합니다.
min-width 설정 — 테이블에 최소 너비를 지정하면 열이 지나치게 좁아지는 것을 방지할 수 있습니다.
position: sticky — 첫 번째 열이나 헤더를 고정하면 스크롤해도 기준 정보를 계속 볼 수 있어 편리합니다.

이처럼 overflow-x: auto 한 줄만으로도 기본적인 반응형 테이블을 완성할 수 있으며, 여기에 줄무늬 배경과 패딩을 더하면 어떤 기기에서든 읽기 좋은 표를 만들 수 있습니다.