티스토리 모바일 반응형 스킨에서 표 최적화 방법

티스토리 글을 쓸때 반응형 스킨일 경우 표를 넣으면 모바일에선 표가 잘리는 경우가 있습니다.

특히 저는 실험에 관한 글을 올릴때 표 안에 실험방법을 써서 깔끔하게 보이도록 하는데, 모바일에서 볼 경우 표가 잘려 오히려 보는데 불편했습니다.

그래서 티스토리 모바일 반응형 스킨에서 표 사이즈를 최적화 하는 법을 알아보겠습니다.

모바일 반응형 스킨에서 표 잘리는 문제

제가 전에 썼던 글입니다. 표가 PC화면에선 제대로 나옵니다.

위의 사진과 같은 글이며, 모바일에서 확인한 모습입니다. 표가 최적화 되지 못하고 한쪽이 잘려 나옵니다.

모바일 반응형 스킨에서 표 최적화 방법

검색해보니 HTML로 최적화하는 법, CSS로 최적화 하는법이 있었는데 여기선 HTML로 최적화 하는법을 알아보겠습니다.

먼저 글을 다 작성한 후 HTML 체크해줍니다.

그리고 CTRL+F로 TABLE 을 검색해줍니다.

그리고 <table class ~~~~ > 에서 아래 파란색 width 항목을 지워주면 됩니다.

-수정 전-

<table class="txc-table" width="866" cellspacing="0" cellpadding="0" border="0" 맑은="" 고딕",="" sans-serif;font-size:16px"="" style="border: none; border-collapse: collapse; width: 866px;">

......</TABLE>

-수정 후-

<table class="txc-table"  cellspacing="0" cellpadding="0" border="0" 맑은="" 고딕",="" sans-serif;font-size:16px"="" style="border: none; border-collapse: collapse;">

......</TABLE>

-수정 후 모바일에서 확인한 모습-

 

수정 후 모바일 반응형 스킨에서 표가 최적화되서 나온 모습을 확인할 수 있습니다.