이것도 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  

     T



    문제점


    티스토리의 카테고리 다른글 보기 플러그인도 Table태그를 사용하고 있어서 스크롤바가 달렸습니다.

    모든 Table요소에 스크롤바가 달리게됩니다.

    Table태그로 포스트 상단 애드센스 구성하신분들이 꽤 계신데 웬만하면 div태그로 수정하시길 권장드리고 싶네요^^


    이런 문제를 해결하고 싶으신 분들은 적용방법 1번의 코드를 다음 코드로 바꿔보세요.

    <script>

    $(document).ready(function(){

      $("table.txc-table").wrap("<div class=scrollableTable></div>");

    });

    </script>

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


    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon 성돌
      2014.08.03 06:26 신고

      스크롤 이용방법 좋네요. ㅎ 감사합니다.

      • BlogIcon 뭐하라
        2014.08.03 10:00 신고

        방문 감사드립니다^^ 좋은하루되세요~

    • BlogIcon the1900
      2014.09.26 14:38 신고

      오오오오오 아주 고맙소 덕분에 모바일에 스크롤이 안보이는 문제와 더불어
      테이블이 짤리는 현상도 해결하였소 그대도 능력자오 핳하하하하핳

    • BlogIcon 팩토리사장
      2014.10.22 20:13 신고

      바로 적용해 보았습니다 ^^ 고마워요~

    • BlogIcon 레피엔
      2015.01.21 02:51 신고

      하나하나 수정하기 난감했는데 덕분에 쉽게 해결했습니다!

    • BlogIcon 조성빈 기자
      2015.03.26 12:38 신고

      table.txc-table로는 안되는데 만약 스크롤이 필요없을때 스크롤 표시가 안나게는 못하나요? 스크롤 비활성화 상태에서도 모양이 나오는데 감출 수 없나요?

      • BlogIcon 뭐하라
        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스킨에 적용된 스크립트인데,
        표가 본문영역을 넘어가는 경우에만 스크롤하도록한 스크립트입니다.
        다른스킨에서 작동할지는 잘모르겠네요

    • BlogIcon 에세마
      2015.11.22 21:56 신고

      잘 쓰겠습니다. 고맙습니다. ^^

    • BlogIcon photoholicat♪
      2015.11.29 00:20 신고

      감사합니다^^ 많이 불편했는데 알려주신대로하니 참 좋네요!


    • 2016.12.09 10:20

      비밀댓글입니다