티스토리 모바일, 표 잘림 수정방법

안녕하십니까? 오늘은 티스토리 모바일에서 보여지는 "표(table)"가 잘리는 현상에 대해 이 문제를 수정하는 방법을 알아볼까한다. (본 내용은 티스토리를 처음하는 초보 블로거분들께 도움이 되는 내용으로 중급자 이상인 분들은 그냥 한번 봐주길 바란다.) 네이버 블로그에서는 표를 이용해서 글을 작성하여도 모바일에서 보여질때는 깔끔하게 보였었는데, 티스토리에서는 포스팅할때 표를 이용하여 내용을 만들면 모바일에서는 글자가 제대로 나오지 않고 잘림현상이 발생되었다. 정확히 말하면 잘렸다기보다는 표 길이만큼 옆으로 스크롤이 되어버렸다. 이는 필자도 초보이기에 알지못하였으나 검색을 통해 방법을 알았고, 이 방법을 알려주고자 한다.

티스토리 모바일, 표 잘림 수정방법

이전에 올렸던 액션캠 포스트 글을 모바일에서 내용을 확인을 하면, 위 이미지처럼 제목이 한번에 확인이 되지않고 SJ뒤로는 글자가 짤려나왔다. 여기서 손가락으로 화면에 대고 옆으로 드래그하면 글자가 나타나기는 하나 누가 이렇게 확인을 하겠는가? 화면에 보이지않으면 끝이지.

글 작성하는것마다 이렇게 나와서 무엇이 문제인지 궁금했다. 이 문제는 비교적 간단했다.

1. 글쓰기에서 html 코드표 실행.

글쓰기 화면에서 우측 상단 html 앞에 체크를 해주면 html 코드입력 화면으로 바뀌게 된다.

2. "width"코드 옆 숫자를 100%로 변경하라

현재화면에서 html코드가 보일것이다. 여기서 다른부분은 굳이 확인할 필요는 없고, table코드 상단에 위치한 width코드 부분만 확인하면 된다. 나의 테이블 폭은 794크기로 설정되어 있는데 이 부분을 "100%"로 변경 해주면된다.

(변경 전)

<table class="txc-table" with="794" cellspacing="0" cellpadding="0" border="0" style="border:none;border-collapse:collapse;;font-family:" 맑은="" 고딕",="" sans-serif;font-size:19px'=""><table><tr><td style="width:200px: height: 40px......

(변경 후)

<table class="txc-table" width="100%" cellspacing="0" cellpadding="0" border="0" style="border:none;border-collapse:collapse;;font-family:" 맑은="" 고딕",="" sans-serif;font-size:19px'=""><table><tr><td style="width:200px: height: 40px......

이렇게 바꿔주는것만으로 해결이 되었다. 

처음에 올렸던 이미지는 모바일에서 표가 잘려서 나왔지만 html코드 중 width 부분을 바꿔준 후에는 아래와 같이 바뀌어졌다.

width코드 폭 수치는 table코드 최상단에 위치한 <table calss=에 첫번째 부분만 수정해주면 된다. 이상으로 티스토리 모바일에서 표가 잘리는 현상 수정하는 방법을 알아보았다.