웹페이지에서 표(table)가 잘리는 경우 해결방법 (가로 횡스크롤)

# 블로거(Blogger)로 작성된 페이지에서 표(table)이 길어서 잘려 보이는 경우 해결방법, 반응형 모바일 페이지, 가로 횡스크롤을 통해 표 잘려 보이지 않게 하기

• 웹페이지에 가로로 긴 표(table)을 넣는 경우, 웹페이지 상에서 특히 모바일(스마트폰 등)로 보는 경우 잘려 보일 수 있습니다. 

• 아래의 예시를 한번 보시죠..
• 항목1~10까지 총 10개의 열을 넣었으나 사용 환경에 따라 잘려 보이실 겁니다.

예시.

항목1	항목2	항목3	항목4	항목5	항목6	항목7	항목8	항목9	항목10
1	가	나	다	라	마	바	사	아	자
2	ㄱ	ㄴ	ㄷ	ㄹ	ㅁ	ㅂ	ㅅ	ㅇ	ㅈ
3	A	B	C	D	E	F	G	H	I
4	a	b	c	d	e	f	g	h	i

• 특히 블로거(Blogger)에서는 표를 넣는 경우, 웹페이지를 보는 환경, 즉 PC, 스마트폰, 태블릿 등에 따라 표가 잘려 보일 수 있는데, 이는 '표'의 경우 별도 CSS를 사용하지 않으면 고정된 값으로 들어가기 때문이고, 반응형 사이트라고 해도 '표'를 자동으로 반응형으로 볼 수 있게 처리해주지 않는 경우가 대부분이라서 그렇습니다.

• 이런 경우 해결하기 위한 방법이 몇 가지 있는데, 오늘은 가로로 긴 표에 가로 횡 스크롤 기능을 넣는 방법을 소개해보고자 합니다.

• 참고로. 혹시 블로거(Blogger)에서 표를 어떻게 만드는지 궁금하다면, 아래 포스팅을 참고하기 바랍니다.

    ▷ Blogger(Blogger)에서 표 쉽게 만드는 방법 

□ 표(Table)에 가로 횡 스크롤을 적용하는 방법

• 일단 '표'를 만들어서 삽입하는 것은 안다는 가정하에 설명합니다.
  
  
• 블로거(Blogger) 사이트 기준으로 설명합니다. 혹시 다른 플랫폼을 쓰시더라도 아래 방법으로 진행하시면 무리 없이 적용 가능합니다.

  

1단계) 표(Table)를 만들어서 삽입합니다.

• 표 만들고 삽입하는 방법을 모르시는 경우에는 위에 안내된 링크에 가서 한번 보시기 바랍니다.
  
  
•  예를 들어, 아래와 같이 '가로'로 길쭉한 표를 넣어보겠습니다.

표 table 예시

2단계) 삽입된 표(Table)를 'div 태그'로 감쌉니다. (HTML 수정)

• ① 블로거의 경우, 'HTML 보기'로 전환하여 HTML 코드를 수정할 수 있는 화면으로 갑니다.
  
  
• ② <table>, </table> 태그를 찾습니다.
  - 블로거(Blogger)의 경우에는 <table> 대신 "<table border="1" ~~ " 로 시작하는 코드를 찾으시면 되고, table 관련  </table>를 찾으시면 됩니다.

• ③ 해당 table 태그 앞뒤로 아래와 같이 <div> 태그를 넣습니다.

      <div class="table-container">                 

      <table ~~                                          

        /* 요기는 table 내용이 들어 있습니다. */  

      </table>                                            

      </div> 

       

3단계) 가로 횡스크롤 적용을 위해 아래의 CSS를 넣어줍니다.

• 블로거(Blogger)의 경우, HTML 맨 상단 부분에 <style>태그를 사용하여 아래 CSS를 적용합니다.
• 아래 코드를 txt로 보시거나 복사하시려면 여기를 누르세요.

<style media="screen">

 

  .table-container{

    width:100%;

    overflow-x:auto;

    white-space: nowrap;

  }

  

  table{

    width:auto;

  }

  }  

  

  </style>

  

여기까지 하면 다 되었습니다.

아래는 위의 가로 횡 스크롤 코드를 적용한 표(table)입니다.

PC 또는 모바일로도 한번 보시기 바랍니다.

참고로, 모바일에서는 손가락으로 표를 좌측으로 밀면 스크롤이 됩니다.

항목1	항목2	항목3	항목4	항목5	항목6	항목7	항목8	항목9	항목10
1	가	나	다	라	마	바	사	아	자
2	ㄱ	ㄴ	ㄷ	ㄹ	ㅁ	ㅂ	ㅅ	ㅇ	ㅈ
3	A	B	C	D	E	F	G	H	I
4	a	b	c	d	e	f	g	h	i