티스토리 표만들기에 의해 만들어진 표 잘리는 현상 해결 방법

티스토리 글쓰기 에디터는 글쓰기 도중 직접 표를 만들어 넣을 수 있는 표 만들기라는 훌륭한 도구를 가지고 있습니다.

다양한 표서식도 포함하고 있어 고급 워드 프로세서 수준의 표를 간단하게 만들어 넣을 수 있습니다.

 

 

그런데 표만들기를 통해 만들어진 표들은 작성 당시의 픽셀 크기를 기준으로 HTML 코드로 들어가게 되어 있습니다.

우리가 구글 애드센스의 광고를 고정형 광고와 반응형 광고로 나누듯이 티스토리 에디터의 표 만들기 기능은 입력한 고정형 픽셀 단위로 코드가 삽입되게 됩니다.

따라서 티스토리 에디터에서 열심히 도표를 만들고 수치를 입력하고 디자인을 꾸민뒤 업로드하고 PC 화면에서 보았을 때 일부 표들은 아래와 같이 잘려 보이게 됩니다.

 

 

이제 이 문제를 수정해 보겠습니다.

티스토리 관리자 페이지에서 이미 발행한 글 중, 표잘림 현상이 일어나는 글의 수정을 누른 뒤 HTML을 체크하여 도표가 있는 코드 부분을 찾아 봅니다.

그러면 아래와 같이 도표 부분의 코드가 보이는 데 가장 위쪽의 메인 Width 설정 한개만 바꾸어 줘도 표 전체가 바뀌게 됩니다.

 

위의 그림에 나오는 잘린 표의 변경전의 코드입니다.

 

<table class="txc-table" style="FONT-SIZE: 19px; BORDER-TOP: medium none; FONT-FAMILY: '맑은 고딕',sans-serif; BORDER-RIGHT: medium none; BORDER-COLLAPSE: collapse; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none" cellspacing="0" cellpadding="0" width="964" border="0">
<tbody>

 

 

위의 그림에 나오는 잘린 표의 변경후의 코드입니다.

달라진 점은 width의 고정 픽셀값을 % 값으로 변경시켜준 것입니다.

 

<table class="txc-table" style="FONT-SIZE: 19px; BORDER-TOP: medium none; FONT-FAMILY: '맑은 고딕',sans-serif; BORDER-RIGHT: medium none; BORDER-COLLAPSE: collapse; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none" cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>

 

 

이제 수정이 끝났으니 재발행한 후 웹 브라우저에서 잘리던 부분을 확인해 보면 아래와 같이 깨끗하게 문제가 해결되었습니다.

 

 

이상으로 티스토리 에디터에서 긴 표를 만들 시 뒷부분이 잘려나가는 현상을 간단히 HTML 코드 수정으로 해결해 보았습니다.