티스토리 표 테두리 없애기_데스크탑 모바일 모두 적용가능

티스토리에서 글을 쓸 때 표를 넣고 테두리 없음을 해도 미리보기나 글 발행후 봤을 때 테두리가 남아있는 것을 볼 수 있습니다. 필요에 따라 표의 테두리를 꼭 없애야 하는 경우에는 답답할텐데요, 어떻게 해야 완벽하게 테두리를 없앨 수 있는 지 오늘 알려드리겠습니다.

일단 html을 건드려야 합니다. 복잡하지 않을까하는 걱정은 하지 않으셔도 됩니다. 필요한 자리에 복사붙여넣기만 하면 되니 한번 봅시다.

 

---

표 테두리 없애는 방법

 

테두리가 없어지지 않는 문제를 해결하기 위해서는 html로 각 셀마다 테두리 없애는 작업을 해줘야 합니다. 글에 3*2 표를 넣으면 html에는 아래와 같은 코드가 생성됩니다.

<table style="border-collapse: collapse; width: 100%;" border="1" data-ke-align="alignLeft">
<tbody>
<tr>
<td style="width: 33.3333%;">&nbsp;</td>
<td style="width: 33.3333%;">&nbsp;</td>
<td style="width: 33.3333%;">&nbsp;</td>
</tr>
<tr>
<td style="width: 33.3333%;">&nbsp;</td>
<td style="width: 33.3333%;">&nbsp;</td>
<td style="width: 33.3333%;">&nbsp;</td>
</tr>
</tbody>
</table>

이 코드의 모든 style영역에 border:none;을 삽입해주면 됩니다.

위 코드에서 수정하면 아래와 같습니다.

<table style="border-collapse: collapse; width: 100%; border:none;" border="1" data-ke-align="alignLeft">
<tbody>
<tr>
<td style="width: 33.3333%; border:none;">&nbsp;</td>
<td style="width: 33.3333%; border:none;">&nbsp;</td>
<td style="width: 33.3333%; border:none;">&nbsp;</td>
</tr>
<tr>
<td style="width: 33.3333%; border:none;">&nbsp;</td>
<td style="width: 33.3333%; border:none;">&nbsp;</td>
<td style="width: 33.3333%; border:none;">&nbsp;</td>
</tr>
</tbody>
</table>

 

결과물을 비교해볼게요

 

<수정 전>

1X1	1X2	1X3
2X1	2X2	2X3

<수정 후>

1X1	1X2	1X3
2X1	2X2	2X3

 

데스크탑이나 모바일 모두 테두리가 없는 표가 출력되는 모습을 볼 수 있습니다. 표테마로 테두리 없음을 설정해도 테두리가 나와서 고민하셨던 분들 모두 이 방법을 사용해보시기 바랍니다.