반응형 스킨에서 표(테이블) 크기 자동 조절하기

반응형 스킨을 사용하는 티스토리 블로그에서 표가 잘리는 현상을 겪고 있었어요.

간단한 CSS코드만 추가하면 표 크기를 페이지 너비에 맞게 자동으로 조절되게 할 수 있습니다.

 

 

table.txc-table {

width: 100%;

table-layout: fixed;

} 

table thead tr {

width: 100%;

}

 

위의 코드를 CSS에 추가하고 저장하시면 해결 될 거예요.

이 코드는 테이블의 너비가 상위 레이어 크기에 따른 비율로 지정되도록 하는 것입니다.

페이지가 너무 좁으면 잘리긴 합니다 ^^;

 

 

그. 러. 나...

모바일(휴대폰) 화면에서 표를 보면 이렇게..

 

여전히 표가 잘리더라구요.

 

 

 

해결방법은요..

글쓰기 화면에서 HTML 체크하시면 태그 수정화면이 나오거든요.

 

 

 

 

TABLE 태그에 있는 width를 삭제하시고 저장하세요.

 

 

 

그러면 이렇게..

 

모바일 화면에서의 표 잘림을 해결할 수 있습니다. 한 칸에 많은 내용이 있어서 그런가 표가 잘리진 않지만 보기에 불편하긴 하네요.

어쨌든 표 잘림은 TABLE 태그 속의 width를 지워서 해결했습니다~