티스토리 표에 가로 스크롤바 생성 방법

티스토리로 글을 작성하다 보면 가로길이가 긴 표를 만들어야 할 때가 생깁니다. 이 경우, PC로 확인할 때는 괜찮다고 생각할지 몰라도 폭이 좁은 모니터나 모바일, 분할화면 등에서는 상당히 보기 불편합니다. 이 문제를 해결하기 위해 이번 글에서는 표에 스크롤바를 생성하는 방법을 정리했습니다.

목차

티스토리 표에 스크롤바 생성

1. 스크롤바 생성 방법
2. 스크롤바 생성 예시

티스토리 표에 스크롤바 생성

1. 스크롤바 생성 방법

스크롤바 생성은 간단합니다. 우선 html 편집 모드로 들어갑니다.

① 표를 의미하는 table 태그의 스타일에 아래와 같은 코드를 추가합니다.
※ white-space: nowrap은 웹 영역을 벗어날 때 줄 바꿈을 하지 않고 표를 늘려서 데이터를 표시합니다.

② table 태그 앞, 뒤로 div태그를 추가합니다.
※ width는 표의 너비를 의미하며, 100% 일 경우에는 화면에서 꽉 차게 표시됩니다.
※ overflow는 웹 영역을 벗어날 때 어떻게 처리하는지에 관한 속성 중 하나입니다.

<div style="width: 100%; overflow: auto;">
<table style = "white-space: nowrap;">
...
</table>
</div>

▶html 코드 파일

티스토리-표에-가로-스크롤-바를-생성하는-코드.txt

0.00MB

2. 스크롤바 생성 예시
① 스크롤바를 생성하지 않은 표의 코드 앞부분

<table style="border-collapse: collapse; width: 100%;" border="1" data-ke-align="alignLeft">
<tbody>
...
</tbody>
</table>

반응형

② 스크롤바를 생성하지 않은 표

구분	집단1	집단2	집단3	집단4	집단5	집단6	집단7	집단8
성별	성별 데이터	성별 데이터	성별 데이터	성별 데이터	성별 데이터	성별 데이터	성별 데이터	성별 데이터
연령대	연령 데이터	연령 데이터	연령 데이터	연령 데이터	연령 데이터	연령 데이터	연령 데이터	연령 데이터
지역사회유형	자역사회 데이터	자역사회 데이터	자역사회 데이터	자역사회 데이터	자역사회 데이터	자역사회 데이터	자역사회 데이터	자역사회 데이터

③ 위 방법대로 수정한 코드

<div style="width: 100%; overflow: auto;">
<table style="border-collapse: collapse; width: 100%; white-space: nowrap;" border="1" data-ke-align="alignLeft">
<tbody>
...
</tbody>
</table>
</div>

④ 위 방법대로 수정한 표

구분	집단1	집단2	집단3	집단4	집단5	집단6	집단7	집단8
성별	성별 데이터	성별 데이터	성별 데이터	성별 데이터	성별 데이터	성별 데이터	성별 데이터	성별 데이터
연령대	연령 데이터	연령 데이터	연령 데이터	연령 데이터	연령 데이터	연령 데이터	연령 데이터	연령 데이터
지역사회유형	지역사회 데이터	지역사회 데이터	자역사회 데이터	지역사회 데이터	지역사회 데이터	지역사회 데이터	지역사회 데이터	지역사회 데이터

모바일로 확인해 보니 깔끔한 표가 완성되었습니다.