Blog+Computer+Internet
표 아래에 스크롤바 넣기
catcactus
2016. 6. 7. 10:16
반응형
스킨을 바꾸었더니 표 잘림 현상이 보이네요. 스마트폰에서 보면 표가 반도 안보여서 표 아래에 스크롤 바를 넣어서 해결했습니다.
1. 스킨의 html에서 <body>와</body> 사이에 다음을 추가합니다.
<script>
$(document).ready(function(){
$("table.txc-table").wrap("<div class=scrollableTable></div>");
});
</script>
2. 스킨의 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;
}
새로바꾼 스킨의 디자인은 아주 좋은데 로딩 속도가 좀 오래 걸리는 것 같아요. 표는 가능하면 사용을 자제하고, 로딩 속도 개선하는 방법도 좀 찾아봐야 할 거 같아요.