표(Table) 디자인 최적화: 모바일에서도 깨끗하게 보이는 반응형 표 만드는 방법 6가지

모바일에서도 깨끗하게 보이는 반응형 표

 모바일에서도 깨끗하게 보이는 반응형 표 만드는 방법 6가지

 

PC에서 멀쩡하게 잘 보이던 표(Table)가 모바일에서 완전히 무너지는 건 흔한 문제다. 올바른 CSS 반응형 처리만 해도 이 문제를 100% 잡을 수 있다. 표는 데이터를 정리해서 보여주는 가장 효과적인 방법이지만, 반응형 처리가 없으면 모바일 독자 입장에서는 가장 짜증나는 요소가 된다. 가로로 잘리거나, 글자가 겹치거나, 표 밖으로 삐져나오는 현상들이다. 이번 글에서는 "반응형 표"를 만드는 실전 CSS 기법 6가지를 정리했다. 코드 바로 복사해서 쓸 수 있게 준비했다.

 

📋목차

• 모바일에서 표가 깨지는 이유
• 기본 표 CSS 초기화 설정
• 수평 스크롤로 표 처리하기
• 카드형으로 변환하는 반응형 표
• 모바일에서 일부 컬럼 숨기기
• 가독성 높이는 표 디자인 CSS
• 다크 모드 대응 표 스타일
• 마무리 요약

🤔 모바일에서 표가 깨지는 이유

표가 모바일에서 깨지는 근본 원인은 단순하다. HTML 테이블은 기본적으로 내용에 맞게 가로 폭을 늘리려는 성질이 있다. 칼럼이 많고 내용이 길면 화면 너비를 훌쩍 넘어버린다. 이때 부모 컨테이너에 overflow: hidden이나 별다른 처리가 없으면 표가 화면 밖으로 삐져나오거나 부모 컨테이너 레이아웃 자체를 망가뜨린다.

특히 티스토리나 워드프레스 에디터에서 표를 삽입할 때 자동으로 반응형 처리를 해주지 않는 경우가 많다. PC에서 편집하면서 확인하니까 멀쩡해 보이는데, 실제 모바일 독자들은 다 망가진 표를 보고 있는 상황이 생긴다. 이걸 CSS로 잡아주면 된다.

"반응형 표"를 만드는 방법은 크게 세 가지 방향으로 나눌 수 있다. 첫째는 수평 스크롤을 허용하는 방식, 둘째는 모바일에서 표 구조 자체를 바꾸는 방식, 셋째는 불필요한 컬럼을 숨기는 방식이다. 상황에 따라 세 가지를 조합해서 쓰면 된다.

🔧 기본 표 CSS 초기화 설정

먼저 모든 표에 적용할 기본 초기화 CSS를 잡아두자. 브라우저 기본 스타일이 제각각이라서 초기화 없이 스타일링을 시작하면 브라우저마다 다르게 보이는 문제가 생긴다.

/* 기본 표 초기화 및 스타일 */
table {
  width: 100%;
  border-collapse: collapse;  /* 셀 간 이중 선 제거 */
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.6;
}

th, td {
  padding: 10px 14px;
  text-align: left;
  border: 1px solid #dddddd;
  vertical-align: top;
  word-break: break-word;  /* 긴 단어 자동 줄바꿈 */
}

th {
  background-color: #f2f4f7;
  font-weight: 600;
  color: #333;
  white-space: nowrap;  /* 헤더는 줄바꿈 방지 */
}

tr:nth-child(even) td {
  background-color: #fafafa;  /* 짝수 행 배경색 - 가독성 향상 */
}

tr:hover td {
  background-color: #f0f4ff;  /* 호버 시 행 강조 */
  transition: background-color 0.15s ease;
}

이 초기화 코드를 기반으로 각 상황에 맞는 "반응형 표" 처리를 추가하면 된다.

↔️ 수평 스크롤로 표 처리하기

가장 단순하고 확실한 방법이다. 표를 감싸는 컨테이너에 가로 스크롤을 허용하는 방식이다. 표 구조는 그대로 유지하면서 모바일에서도 전체 내용을 볼 수 있다.

/* 표 래퍼 - 수평 스크롤 허용 */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;  /* iOS에서 부드러운 스크롤 */
  margin: 20px 0;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* 스크롤 가능하다는 시각적 힌트 */
.table-wrapper::after {
  content: '← 좌우로 스크롤할 수 있습니다';
  display: none;
  font-size: 12px;
  color: #999;
  text-align: right;
  padding: 5px 0;
}

/* 모바일에서만 스크롤 힌트 표시 */
@media (max-width: 600px) {
  .table-wrapper::after {
    display: block;
  }

  .table-wrapper table {
    min-width: 500px;  /* 최소 너비 설정 - 표가 너무 좁아지는 것 방지 */
  }
}

<!-- 사용법 -->
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>항목</th>
        <th>설명</th>
        <th>값</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>예시</td>
        <td>내용</td>
        <td>데이터</td>
      </tr>
    </tbody>
  </table>
</div>

스크롤 방식의 장점은 표 데이터를 한 줄도 빠뜨리지 않고 다 보여준다는 것이다. 칼럼이 많거나 데이터가 복잡한 "반응형 표"에 적합하다.

🃏 카드형으로 변환하는 반응형 표

모바일에서는 표를 아예 카드형으로 변환하는 방법도 있다. 각 행(row)을 하나의 카드처럼 보여주는 방식이다. 컬럼이 적고 데이터 종류가 명확할 때 효과적이다.

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  /* 헤더 숨기기 (data-label로 대체) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  /* 각 행을 카드처럼 */
  tbody tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }

  /* 각 셀에 라벨 표시 */
  td {
    border: none;
    border-bottom: 1px solid #eeeeee;
    padding: 10px 14px;
    position: relative;
    padding-left: 45%;
  }

  /* data-label 속성으로 라벨 표시 */
  td::before {
    content: attr(data-label);
    position: absolute;
    left: 14px;
    width: 40%;
    font-weight: 600;
    color: #555;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  td:last-child {
    border-bottom: none;
  }
}

<!-- HTML - data-label 추가 필수 -->
<table>
  <thead>
    <tr>
      <th>상품명</th>
      <th>가격</th>
      <th>재고</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="상품명">노트북 A</td>
      <td data-label="가격">1,200,000원</td>
      <td data-label="재고">5개</td>
    </tr>
  </tbody>
</table>

카드형 변환은 데이터가 3~5개 컬럼 정도일 때 가장 잘 어울린다. 컬럼이 너무 많으면 카드가 너무 길어져서 오히려 불편하다.

🙈 모바일에서 일부 컬럼 숨기기

모든 컬럼이 모바일에서 필요한 건 아니다. 덜 중요한 부가 정보 컬럼은 모바일에서 숨기고 핵심 데이터만 보여주는 방법이다. 가장 단순하면서도 실용적이다.

/* 모바일에서 숨길 컬럼에 클래스 추가 */
.hide-mobile {
  /* PC에서는 정상 표시 */
}

@media (max-width: 600px) {
  .hide-mobile {
    display: none;  /* 모바일에서 숨김 */
  }
}

<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>점수</th>
      <th class="hide-mobile">상세 설명</th>
      <th class="hide-mobile">날짜</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>95점</td>
      <td class="hide-mobile">우수한 성적</td>
      <td class="hide-mobile">2025-01-01</td>
    </tr>
  </tbody>
</table>

이 방법은 th와 td 모두 같은 클래스를 붙여야 한다. th만 숨기고 td를 안 숨기면 컬럼 배치가 엉망이 된다.

✨ 가독성 높이는 표 디자인 CSS

기능적인 "반응형 표" 처리 외에, 시각적으로도 읽기 편한 표를 만드는 CSS 스타일을 정리했다. 어디서 많이 봤던 그 표들이 사실 다 CSS 몇 줄로 만들어진다.

/* 세련된 표 스타일 */
.styled-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border-radius: 8px;
  overflow: hidden;  /* border-radius 적용을 위해 필요 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.styled-table thead tr {
  background-color: #2563eb;
  color: #ffffff;
  text-align: left;
}

.styled-table th,
.styled-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.styled-table tbody tr:last-child td {
  border-bottom: none;
}

.styled-table tbody tr:hover {
  background-color: #eff6ff;
  transition: background-color 0.15s;
}

/* 첫 번째 컬럼 강조 */
.styled-table td:first-child {
  font-weight: 600;
  color: #1d4ed8;
}

🌙 다크 모드 대응 표 스타일

다크 모드를 지원하는 블로그라면 표도 다크 모드 스타일을 따로 잡아줘야 한다. 흰 배경의 표가 다크 배경에 뜨면 상당히 이질감이 있다.

@media (prefers-color-scheme: dark) {
  table {
    color: #e0e0e0;
  }

  th {
    background-color: #2d2d2d;
    color: #f0f0f0;
    border-color: #444;
  }

  td {
    border-color: #333;
  }

  tr:nth-child(even) td {
    background-color: #1e1e1e;
  }

  tr:hover td {
    background-color: #2a2a3a;
  }

  .table-wrapper {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }
}

✅ 마무리 요약

"반응형 표"는 한 번 제대로 세팅해두면 이후에 표를 몇 개를 만들어도 자동으로 잘 적용된다. 블로그 CSS에 오늘 정리한 코드를 추가해두고, HTML 작성할 때 div.table-wrapper로 감싸는 습관만 들이면 된다. 생각보다 훨씬 간단하다.

• ☑ border-collapse: collapse로 기본 초기화
• ☑ .table-wrapper + overflow-x: auto로 스크롤 처리
• ☑ 모바일 카드형 변환 CSS (data-label 필수)
• ☑ 덜 중요한 컬럼 .hide-mobile로 숨김
• ☑ 다크 모드 스타일 별도 지정
• ☑ word-break: break-word로 긴 텍스트 처리

---

참고 자료 및 출처

• MDN Web Docs – table: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
• CSS-Tricks – Responsive Data Tables: https://css-tricks.com/responsive-data-tables/
• W3Schools – CSS Tables: https://www.w3schools.com/css/css\_table.asp
• web.dev – Responsive web design basics: https://web.dev/responsive-web-design-basics/