티스토리 반응형 스킨에서 표 잘림 문제 해결하기
이것도 Table태그를 사용합니다
티스토리에서 표를삽입하면, px단위로 크기를 설정해버리기 때문에 반응형 스킨에서는 끝부분이 잘리기 쉽습니다.
표 뿐만 아니라 table태그를 이용한 티스토리의 모든 요소가 반응형 스킨을 적용했을 때, 화면 크기에 맞게 줄어들지 않습니다.
물론 HTML편집기 모드에서 단위를 %로 바꿔주면 되는데, 막상 살펴보면..
누가 봐도 수정하기 싫게 생겼죠..
그 해결법으로 처음에 생각했던것이 데스크탑보기 모드였습니다. 저는 이것을 반응형 스킨에 응용하여 가로 넓게보기 모드라고 이름을 붙였습니다.
티스토리의 모바일웹 스킨에서 크기가 커서 잘리는 컨텐츠가 있는 경우 데스크탑보기 버튼을 눌러서 확인할 수 있었던 것 처럼
반응형 스킨의 가로크기를 늘이고, 화면 비율을 줄여 큰 컨텐츠를 스크롤해가며 볼 수 있게 만들어봤었습니다.
[TIPs/티스토리&애드센스] - 반응형 스킨 데스크톱 보기 대신할 가로 넓게보기
그러나 가로 넓게보기 버튼을 추가하는 방식은 직관적이지않고, 또 스크롤을 내려서 버튼을 찾아야 하는 불편이 있었습니다.
그래서 좀 더 직관적인 방법이 없을까 고민하다가 그냥 표에 스크롤만 달면 되는것 아닌가? 해서 스크롤바를 달아봤습니다.
적용 방법
1. skin.html에 다음 스크립트를 </body>위쪽에 추가합니다.
<script>
$(document).ready(function(){
$("table").wrap("<div class=scrollableTable></div>");
});
</script>
반응형 스킨을 이용중이면 대부분 jQuery가 적용되어있을 것이라 예상되지만 혹시라도 적용이 되지 않으면 아래 코드를 1번의 스크립트 위에 붙여넣으세요.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2. style.css에 다음을 추가합니다.
div.scrollableTable {
overflow-x:scroll;
}
div.x-scrollable::-webkit-scrollbar {
height: 5px;
}
div.scrollableTable::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(29, 29, 29, 0.5);
}
div.scrollableTable::-webkit-scrollbar-track {
background: rgba(0,0,0,0.1);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
파란색 부분은 스크롤바 모양을 꾸미기 위한 코드입니다. webkit기반 브라우저(안드로이드, 크롬 등)에서만 모양이 적용됩니다.
적용확인
아래의 표나, 3개파일 삽입 사진의 예를 참고하세요.
표 |
가 |
문 |
제 |
입 |
니 |
다. |
. |
. |
. |
T |
a |
b |
l |
e |
T |
a |
b |
l |
e |
T |
a |
b |
l |
e |
T |
a |
b |
l |
e |
문제점
티스토리의 카테고리 다른글 보기 플러그인도 Table태그를 사용하고 있어서 스크롤바가 달렸습니다.
모든 Table요소에 스크롤바가 달리게됩니다.
Table태그로 포스트 상단 애드센스 구성하신분들이 꽤 계신데 웬만하면 div태그로 수정하시길 권장드리고 싶네요^^
이런 문제를 해결하고 싶으신 분들은 적용방법 1번의 코드를 다음 코드로 바꿔보세요.
<script>
$(document).ready(function(){
$("table.txc-table").wrap("<div class=scrollableTable></div>");
});
</script>
단, 이렇게 코드를 삽입할 경우 티스토리 편집기에서 삽입한 표에만 스크롤바가 적용됩니다.
2014.08.03 06:26 신고
스크롤 이용방법 좋네요. ㅎ 감사합니다.
2014.08.03 10:00 신고
방문 감사드립니다^^ 좋은하루되세요~
2014.09.26 14:38 신고
오오오오오 아주 고맙소 덕분에 모바일에 스크롤이 안보이는 문제와 더불어
테이블이 짤리는 현상도 해결하였소 그대도 능력자오 핳하하하하핳
2014.09.26 16:09 신고
방문 감사합니다 ^^
2014.10.22 20:13 신고
바로 적용해 보았습니다 ^^ 고마워요~
2015.01.21 02:51 신고
하나하나 수정하기 난감했는데 덕분에 쉽게 해결했습니다!
2015.03.26 12:38 신고
table.txc-table로는 안되는데 만약 스크롤이 필요없을때 스크롤 표시가 안나게는 못하나요? 스크롤 비활성화 상태에서도 모양이 나오는데 감출 수 없나요?
2015.03.26 12:56 신고
<script>
// 표 감싸기
$("table,iframe,object").each(function() {
if ($(this).outerWidth() > $(".container").width()){
$(this).wrap("<div class=scrollableTable></div>");
}
});
</script>
현재 Material T스킨에 적용된 스크립트인데,
표가 본문영역을 넘어가는 경우에만 스크롤하도록한 스크립트입니다.
다른스킨에서 작동할지는 잘모르겠네요
2015.11.22 21:56 신고
잘 쓰겠습니다. 고맙습니다. ^^
2015.11.29 00:20 신고
감사합니다^^ 많이 불편했는데 알려주신대로하니 참 좋네요!
2016.12.09 10:20
비밀댓글입니다