[CSS#2] table css 모바일에서 테이블에만 좌우 스크롤 기능 넣기

앞서, Table 코드를 반응형으로 만드는 방법에 관한 글을 포스팅한 적이 있는데요. 

2022.06.28 - [컴퓨터/css] - [CSS#1] Responsive Table and CSS 테이블 코드를 반응형으로 만들기

오늘은 또 다른 방향으로 사용할 수 있는 방법을 소개합니다. 

표 안의 내용이 많은 경우, 모바일에서도 table 표를 그대로 가져가고 싶을 때가 있는데요.
Table 구조는 깨지지 않게 유지하면서 좌우로 터치 스크롤 기능을 넣는 방법입니다.

사실 조금만 고민하면 금방 답이 나오는 것이긴 하지만, 그 생각할 시간마저 아까울 때, 
그럴 때 쓰려고 적어 놓습니다.

코드 그대로 카피해서 브라우저로 확인해 보시면 가로 사이즈 480px 이하에서는 가로 스크롤이 확인될껍니다. 

가로 스크롤이 거슬린다면?? 

사실 모바일에선 가로 스크롤이 신경에 거슬릴 정도로 눈을 어지럽히진 않습니다만, 그나마도 없애고 싶다면, 그 방법도 알려드립니다.

2022.07.02 - [컴퓨터/css] - [CSS#3] 스크롤은 되지만 스크롤바는 숨기고 싶을 때

 

<style type="text/css">
  .tbl_basic {border-top: 1px solid #888;}
  .tbl_basic table {width: 100%;border-collapse: collapse; font-size:14px;}
  .tbl_basic table tr th, .tbl_basic table tr td { text-align:left; }
  .tbl_basic table tr th {padding:8px 5px; border:1px solid #888; border-style:solid none;}
  .tbl_basic table tr td {padding:7px 5px; }
  @media screen and (max-width: 481px) 
  {
    .o_table_mobile {width: 100%;overflow: hidden;}
    .o_table_mobile .tbl_basic {overflow-x: scroll;}
    .o_table_mobile .tbl_basic table {width: 100%;min-width:480px;}
  }
</style>

 

<div class="o_table_mobile">
  <h3>모바일 테이블 <small style="color:silver;">좌우로 움직여서 보세요.</small></h3>
  <div class="tbl_basic">
    <table>
      <tbody>
        <tr>
          <th>분야</th>
          <th>제목</th>
          <th>글쓴이</th>
          <th>조회</th>
          <th>날짜</th>
        </tr>
        <tr>
          <td>JS</td>
          <td>실생활에 도움이 되는 자바스크립트 </td>
          <td>김씨</td>
          <td>7</td>
          <td>2022-05-01</td>
        </tr>
        <tr>
          <td>CSS</td>
          <td>실생활에 도움이 되는 스타일 css </td>
          <td>이씨</td>
          <td>8</td>
          <td>2022-06-02</td>
        </tr>
        <tr>
          <td>HTML</td>
          <td>실생활에 도움이 되는 HTML </td>
          <td>박씨</td>
          <td>9</td>
          <td>2022-07-03</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

 

 

데스크탑 형태

 

모바일 형태