티스토리 표 조절하기(모바일)

티스토리 표 모바일

티스토리 모바일로 보게 되면 표가 잘리는 부분이 있어,

옆으로 밀어야 되는 경우가 생깁니다.

보는 입장에서 상당히 불편한 부분이겠죠.

이 부분도 HTML에서 태그만 간단히 고쳐주면 됩니다.

HTML 화면에서 첫 <table> 시작에서 width =100% 입력해주면,

웹에서도 100%로 화면이 확대 되어집니다.

<변경 전>

<table width="764" class="txc-table" style="border:none;border-collapse:collapse;;font-family:" border="0" cellspacing="0" cellpadding="0" 맑은="" 고딕",sans-serif;font-size:15px"=""><tbody><tr><td style="width:764;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;border-left:1px solid #ccc;;"><p style="text-align: center;">100%&nbsp;</p></td>
</tr></tbody></table>

<변경 후>

100%

Ctrl+F 에서 width 검색 764 --> 100%으로 변경해주면 됩니다.

<table width="100%" class="txc-table" style="border:none;border-collapse:collapse;;font-family:" border="0" cellspacing="0" cellpadding="0" 맑은="" 고딕",sans-serif;font-size:15px"=""><tbody><tr><td style="width:764;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;border-left:1px solid #ccc;;"><p style="text-align: center;">100%&nbsp;</p></td>
</tr></tbody></table>

표 비율 나누기

비율로 나눌 수 있습니다. 전체 100% 중에서 10%, 45%, 45%

HTML에서 전체전인 표<table></table>이라 하고, 열<tr></tr>, 행<td></td>입니다.

행을 비율로 나눈 것입니다.

<변경 전>

10%

45%

45%

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

<td style="width:254;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;border-left:1px solid #ccc;;"><p style="text-align: center;">10%&nbsp;</p></td>
<td style="width:254;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;;"><p style="text-align: center;">45%&nbsp;</p></td>
<td style="width:254;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;;"><p style="text-align: center;">45%&nbsp;</p></td>
</tr></tbody></table>

Ctrl+F 에서 width 검색 764, 254 --> 100%으로 변경해주면 됩니다.(첫 부분만 변경하면 됩니다.)

<변경 후>

10%

45%

45%

<table width="100%" class="txc-table" style="border:none;border-collapse:collapse;;font-family:" border="0" cellspacing="0" cellpadding="0" 맑은="" 고딕",sans-serif;font-size:15px"=""><tbody><tr>

<td style="width:10%;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;border-left:1px solid #ccc;;"><p style="text-align: center;">10%&nbsp;</p></td>
<td style="width:45%;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;;"><p style="text-align: center;">45%&nbsp;</p></td>
<td style="width:45%;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;;"><p style="text-align: center;">45%&nbsp;</p></td>
</tr></tbody></table>