[HMTL] 스크롤 가능한 표 만들기 (overflow-x:auto / min-width)

https://wordpress.org/support/topic/scrollable-tables/

<div class="wrapper-scroll">
<table class="tg tg-scroll">
<thead>
  <tr>
    <th class="tg-eqfb">아이템1</th>
    <th class="tg-eqfb">아이템2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-c3ow">내용1-1</td>
    <td class="tg-0pky">내용1-2</td>
  <tr>
    <td class="tg-c3ow">내용2-2</td>
    <td class="tg-c3ow">내용2-2</td>
</tbody>
</table>
</div>

<style>
  .wrapper-scroll{
    overflow-x:auto;
  }
  .tg-scroll{
    min-width: 40rem;
  }
</style>

• table을 감싸는 div에 overflow-x: auto
• table에 min-width 설정

위 style 속성을 지정해주면 설정한 min-width 이하의 스크린 사이즈에서 테이블을 좌우로 스크롤할 수 있다. min-width:40rem; 으로 지정하면 400pixel 이하의 스크린 사이즈에서 스크롤 가능하다.

테이블의 내용이 많을 때 사용하면 휴대폰 화면에서도 가시성 좋게 테이블을 표현할 수 있다.

어떤 방법을 쓰면 좋을까 고민하다가 wordpress 공식 홈페이지 pricing 표를 찾아 보았다. 이런 방법으로 구현되어 있었다. 나도 적용해 봄