# 블로거(Blogger)로 작성된 페이지에서 표(table)이 길어서 잘려 보이는 경우 해결방법, 반응형 모바일 페이지, 가로 횡스크롤을 통해 표 잘려 보이지 않게 하기
- 웹페이지에 가로로 긴 표(table)을 넣는 경우, 웹페이지 상에서 특히 모바일(스마트폰 등)로 보는 경우 잘려 보일 수 있습니다.
- 아래의 예시를 한번 보시죠..
- 항목1~10까지 총 10개의 열을 넣었으나 사용 환경에 따라 잘려 보이실 겁니다.
예시.
- 특히 블로거(Blogger)에서는 표를 넣는 경우, 웹페이지를 보는 환경, 즉 PC, 스마트폰, 태블릿 등에 따라 표가 잘려 보일 수 있는데, 이는 '표'의 경우 별도 CSS를 사용하지 않으면 고정된 값으로 들어가기 때문이고, 반응형 사이트라고 해도 '표'를 자동으로 반응형으로 볼 수 있게 처리해주지 않는 경우가 대부분이라서 그렇습니다.
- 이런 경우 해결하기 위한 방법이 몇 가지 있는데, 오늘은 가로로 긴 표에 가로 횡 스크롤 기능을 넣는 방법을 소개해보고자 합니다.
- 참고로. 혹시 블로거(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 또는 모바일로도 한번 보시기 바랍니다.
참고로, 모바일에서는 손가락으로 표를 좌측으로 밀면 스크롤이 됩니다.