[티스토리 블로그] 모바일에서 표가 잘리는 현상. 해결방법은?

 [티스토리 블로그] 모바일에서 표가 잘리는 현상. 해결방법은?

 

티스토리 블로그를 이용하면서 한가지 불편한 점이 생겼습니다. 데스크탑을 이용해서 표를 올리면 정상적으로 보이는데 모바일 화면으로 보면 표가 짤리는 현상이 발생했거든요. 바로 아래 사진처럼 말이죠. 표의 오른쪽 부분은 잘려서 글씨가 전혀 보이지 않았습니다. 처음에 이런 현상이 발생했을 때는 당황해서 표를 다 사진으로 변환해서 올렸습니다. 하지만 앞으로 표를 올릴 일이 종종 생길 것 같아서 검색을 해봤어요. 그랬더니 의외로 쉽게 해결방법이 생기더군요.

 

 

그럼 지금부터 해결방법을 말씀드리겠습니다.

 

 

①  글을 작성한 다음 오른쪽 상단에 있는 HTML을 클릭합니다.

②  'ctrl + F'를 통해 table을 찾습니다.

③  table에서 width의 속성값이 OOOpx로 되어있는 것을 볼 수 있습니다. 

   (사용자의 본문너비 설정에 따라서 값이 다르지만, 제 블로그는  width: 505px'로 되어있습니다.)

④  width의 값을 OOOpx에서 100%로 변경해줍니다.

 

width 속성값을 100%로 변경을 해주고난 후 저장을 합니다. 작성한 표를 모바일로 확인해 보니 아래 사진에서와 같이 정상적으로 보이네요. 잘 아시는 분들도 물론 많으시겠지만, 저는 html을 몰라서 한참을 고민했습니다. 혹시 저처럼 도움이 필요하신 분들이 계실지 몰라 글을 쓰게되었습니다. 티스토리 블로그를 운영하면서 표 작성하실 분들은 이 방법을 이용해보세요. ^^