PC에서는 멀쩡하던 요금표나 비교표가 모바일에서 글자가 한 글자씩 세로로 쪼개지거나 화면 밖으로 밀려나는 경우가 많습니다.
해결 방법은 크게 두 가지입니다. 표를 그대로 두고 가로 스크롤로 감싸거나, 작은 화면에서만 카드형으로 바꿔 보여주는 것입니다.

1. 가장 빠른 방법: 가로 스크롤로 감싸기

표를 div로 한 번 감싸고 그 박스에만 overflow-x: auto를 주면, 페이지는 그대로 두고 표만 옆으로 넘겨볼 수 있습니다. 여기에 표 자체의 최소 폭을 정해 두면 칸이 찌그러지지 않습니다.

<!-- 표를 div로 한 번 감싸기 -->
<div class="table-wrap">
  <table> ... </table>
</div>

/* CSS */
.table-wrap {
  overflow-x: auto;
}
.table-wrap table {
  min-width: 600px; /* 칸이 찌그러지지 않는 폭 */
  border-collapse: collapse;
}

실제 리뉴얼 작업에서 써 보면, 방문자가 옆으로 넘길 수 있다는 걸 모르고 지나치는 경우가 꽤 있습니다. 표 위에 작게 ‘옆으로 밀어서 보기’ 같은 안내 문구를 넣거나, 첫 번째 열(항목명)에 position: sticky; left: 0;과 배경색을 주어 고정해 두면 훨씬 읽기 편해집니다.

2. 칸이 적은 표라면: 모바일에서 카드형으로 바꾸기

요금표처럼 칸이 3~4개뿐이라면 작은 화면에서 행 하나를 카드 한 장으로 바꾸는 방식이 더 자연스럽습니다. 각 칸에 data-label로 제목을 넣어 두고, 미디어쿼리 안에서 ::before로 그 제목을 꺼내 보여주는 방식입니다.

<td data-label="요금">월 33,000원</td>

@media (max-width: 767px) {
  .card-table thead { display: none; }
  .card-table tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid #ddd;
  }
  .card-table td {
    display: flex;
    justify-content: space-between;
  }
  .card-table td::before {
    content: attr(data-label);
    font-weight: 700;
  }
}

주의할 점이 하나 있습니다. 표 요소에 display: block이나 flex를 주면 일부 브라우저와 화면 낭독기에서 더 이상 표로 인식하지 못할 수 있습니다. 정보 전달이 중요한 표라면 1번 방식이 더 안전합니다.

3. 어떤 방식을 고를지 정리

마지막으로, 에디터로 만든 표에 width="800" 같은 고정 폭이 들어 있지 않은지도 꼭 확인하세요. 위 CSS를 넣어도 고정 폭이 남아 있으면 모바일에서 또 밀려납니다.