이것도 Table태그를 사용합니다

티스토리에서 표를삽입하면, px단위로 크기를 설정해버리기 때문에 반응형 스킨에서는 끝부분이 잘리기 쉽습니다.

표 뿐만 아니라 table태그를 이용한 티스토리의 모든 요소가 반응형 스킨을 적용했을 때, 화면 크기에 맞게 줄어들지 않습니다.

물론 HTML편집기 모드에서 단위를 %로 바꿔주면 되는데, 막상 살펴보면..

누가 봐도 수정하기 싫게 생겼죠..

그 해결법으로 처음에 생각했던것이 데스크탑보기 모드였습니다. 저는 이것을 반응형 스킨에 응용하여 가로 넓게보기 모드라고 이름을 붙였습니다.

티스토리의 모바일웹 스킨에서 크기가 커서 잘리는 컨텐츠가 있는 경우 데스크탑보기 버튼을 눌러서 확인할 수 있었던 것 처럼

반응형 스킨의 가로크기를 늘이고, 화면 비율을 줄여 큰 컨텐츠를 스크롤해가며 볼 수 있게 만들어봤었습니다.

[TIPs/티스토리&애드센스] - 반응형 스킨 데스크톱 보기 대신할 가로 넓게보기

그러나 가로 넓게보기 버튼을 추가하는 방식은 직관적이지않고, 또 스크롤을 내려서 버튼을 찾아야 하는 불편이 있었습니다.

그래서 좀 더 직관적인 방법이 없을까 고민하다가 그냥 표에 스크롤만 달면 되는것 아닌가? 해서 스크롤바를 달아봤습니다.

반응형 스킨을 이용중이면 대부분 jQuery가 적용되어있을 것이라 예상되지만 혹시라도 적용이 되지 않으면 아래 코드를 1번의 스크립트 위에 붙여넣으세요.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. style.css에 다음을 추가합니다.

파란색 부분은 스크롤바 모양을 꾸미기 위한 코드입니다. webkit기반 브라우저(안드로이드, 크롬 등)에서만 모양이 적용됩니다.

단, 이렇게 코드를 삽입할 경우 티스토리 편집기에서 삽입한 표에만 스크롤바가 적용됩니다.