추가 스핀은/위/아래 아이콘 테이블을 tablesorter에하는, 예를 들어 <a href="http://tablesorter.com/" rel="nofollow noreferrer">tablesorter</a> 테이블의 각 정렬 열의 헤더에 클릭의 스핀/위/아래 아이콘을 추가 할 최소한의 솔루션을 무엇

Question

https://web.archive.org/web/20170112030141/http://jsfiddle.net/fu12ye88/ (pic)? 모든 내가 찾은

는

예를 들어, 상대적으로 큰 추가 라이브러리를 필요로하는 솔루션입니다 https://web.archive.org/web/20170112030034/http://jsfiddle.net/Mottie/abkNM/325/

Answer 1

당신이 the docs에 가면 당신은 당신의 분류 표를 정의하는 방법을 많이 찾을 수 있습니다.

나는 주어진 예 ( https://mottie.github.io/tablesorter/) 밖으로 CSS를 가지고 가고 당신의 바이올린과 the result is exactly what you want에 일부 적용 :

.tablesorter-default .header, 
.tablesorter-default .tablesorter-header { 
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); 
    padding: 4px 20px 4px 4px; 
    background-repeat: no-repeat; 
    background-position: center right; 
} 

.tablesorter-default thead .headerSortUp, 
.tablesorter-default thead .tablesorter-headerAsc, 
.tablesorter-default thead .tablesorter-headerSortUp { 
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7); 
} 

.tablesorter-default thead .headerSortDown, 
.tablesorter-default thead .tablesorter-headerDesc, 
.tablesorter-default thead .tablesorter-headerSortDown { 
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7); 
}