모바일에서 안 깨지는 반응형 표 만들기 (CSS 코드 전체 공개)

안녕하세요, 안다형입니다! 블로그에 표를 넣으면 PC에서는 깔끔한데 휴대폰에서 열어보면 글자가 뭉개지거나 화면 밖으로 삐져나가는 경우가 많습니다.

오늘은 CSS 몇 줄로 모바일에서도 읽히는 표를 만드는 방법 두 가지를 알려드리겠습니다. 복사해서 그대로 쓰시면 됩니다.

1. 기본 표 구조

먼저 평범한 표를 하나 만듭니다.

<div class="tbl-wrap">
  <table class="tbl">
    <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>
    </tbody>
  </table>
</div>

2. 방법 A. 가로 스크롤로 감싸기

가장 간단한 방법입니다. 표를 감싼 영역에 스크롤을 주면 화면을 벗어나지 않습니다.

.tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tbl{width:100%;min-width:520px;border-collapse:collapse;}
.tbl th,.tbl td{border:1px solid #e2e8f0;padding:12px 14px;
  font-size:15px;text-align:left;white-space:nowrap;}
.tbl thead th{background:#12243d;color:#fff;}
.tbl tbody tr:nth-child(even){background:#f7f9fc;}

min-width 값이 핵심입니다. 이 값보다 화면이 좁아지면 좌우 스크롤이 생깁니다. 표의 열 개수에 맞춰 조절해 주세요.

3. 방법 B. 모바일에서 카드형으로 바꾸기

열이 많은 표라면 아예 세로로 쌓아 카드처럼 보여주는 편이 읽기 좋습니다.

@media (max-width:600px){
  .tbl thead{display:none;}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%;}
  .tbl tr{margin-bottom:14px;border:1px solid #e2e8f0;
    border-radius:10px;overflow:hidden;}
  .tbl td{border:0;border-bottom:1px solid #eef2f7;
    padding:12px 14px;white-space:normal;}
  .tbl td:last-child{border-bottom:0;}
  .tbl td::before{content:attr(data-th);display:block;
    font-weight:700;color:#5b6c83;font-size:13px;margin-bottom:4px;}
}

이 방식을 쓰려면 각 td 에 data-th 속성으로 항목 이름을 넣어줘야 합니다. 예를 들어 data-th="구분" 처럼요. 그래야 모바일에서 각 값 위에 항목명이 표시됩니다.

두 방식 비교

4. 티스토리에 적용하는 방법

1. 글쓰기에서 기본모드 → HTML로 전환합니다.
2. 표 HTML을 붙여넣습니다.
3. CSS는 style 태그로 감싸 같은 글에 넣거나, 여러 글에서 쓸 예정이면 스킨 편집 → CSS에 한 번만 넣어둡니다.
4. 발행 후 휴대폰으로 직접 열어 확인합니다.

여러 글에서 반복해 쓸 거라면 스킨 CSS에 넣어두는 쪽이 훨씬 관리하기 편합니다. 글마다 복사할 필요가 없어집니다.

자주 묻는 질문

Q. 표가 여전히 화면을 넘어갑니다.

감싸는 div에 overflow-x:auto 가 제대로 걸렸는지, 그리고 표에 고정 width 값이 남아 있지 않은지 확인해 보세요.

Q. 글자가 너무 작게 보입니다.

min-width를 줄이고 white-space:nowrap 을 해제하면 줄바꿈이 되어 글자 크기를 유지할 수 있습니다.

Q. 에디터에서 만든 표에도 적용되나요?

가능합니다. HTML 모드에서 해당 table 태그에 class를 추가해 주면 됩니다.

마무리

표는 정보를 정리하기 좋은 도구지만, 모바일 대응을 안 하면 오히려 읽기 어려워집니다. 열이 적으면 가로 스크롤, 많으면 카드형 변환. 이 기준만 기억하시면 됩니다.

 

함께 보면 좋은 글

• 예쁜 버튼 만들기 CSS
• 맥 스타일의 창 만들기 CSS
• 홈페이지 떠있는 배너 만들기
• 모바일 상단 색상 넣는 방법