티스토리 테이블( 차트 , 표 ) 스크롤 기능 구현

티스토리블로그를 1년쯤 운영하고 나서 처음에 업로드한 글들을 보면 대부분 가독성이 떨어지거나 조금 조잡스럽게 보일 것입니다. 또한 블로그 방문자 대부분이 모바일 통해 방문하다 보니 테이블을 삽입했을 경우 PC최적화가 되어 있어 모바일로 보게 될 경우 더욱 조잡스럽게 보일 것입니다.  

 

 

 

 

목          차

1. 티스토리 모바일 테이블 스크롤 2. 티스토리 테이블( 차트 , 표) 스크롤 소스 코드

 

1. 티스토리 모바일 테이블 스크롤

(1) 좌측사진

모바일 테이블(차트,표)스크롤이 적용된  테이블

 

(2) 우측사진

모바일 테이블(차트,표)스크롤이 적용되지 않아 테이블 안에 글이 길게 나열되어 가독성이 떨어짐

 

 

 

반응형

 

 

 

2. 티스토리 테이블( 차트 , 표) 스크롤 소스 코드

티스토리블로그의 모바일 버젼의 가독성을 높이기 위해 아래와 같이 html 소스코드를 블로그 html 편집을 통해 변경하는 작업

(1) 테이블(차트, 표) 스크롤 소스 코드 삽입

1) 티스토리 스킨편집입장

2) html 편집 클릭

3) ctrl + f 이용 검색하여 아래 빨간색 html소스를 추가 입력한다.

4) 저장하기

5) 미기보기에서 모바일 버전으로 테이블 스크롤이 생성되었는지 확인한다.

 

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

※ 테이블(차트 , 표) 소스코드 복사하기

 

 

 

오늘은 티스토리 테이블( 차트, 표 ) 스크롤 기능 구현에 대해 살펴보았습니다. 오늘도 포스팅이 도움이 되셨다면 공감 부탁드립니다. 감사합니다.