JQuery TableSorter CSS иконки со стрелками - PullRequest
Новая
       23

JQuery TableSorter CSS иконки со стрелками

3 голосов
/ 14 декабря 2011

Это действительно больше вопрос CSS, чем вопрос jQuery. Я использую jQuery плагин TableSorter для динамической сортировки таблиц.

Вот как это выглядит сейчас: enter image description here

Вот код CSS, который я использую: 

th.sortable{
    font-weight: bold;
    cursor:pointer;
    background-repeat: no-repeat;
    background-position: center right;
}

th.headerSortUp {
    background-image: url("arrow-up.gif");
}
th.headerSortDown {
    background-image: url("arrow-down.gif")
}

Проблема с текущей реализацией заключается в том, что стрелка справа над заголовком. В приведенном выше примере таблица сортируется по уровню, но похоже, что она может быть по местоположению.

Есть ли простой способ переместить стрелку влево, чтобы она находилась прямо справа от конца метки «уровень»?

Ответы [ 6 ]

7 голосов
/ 14 декабря 2011

Поместите тег span в th и добавьте в него: 

th.headerSortUp span {
    background: url("arrow-up.gif") right center no-repeat;
    padding-right: 15px;
}
2 голосов
/ 07 декабря 2015 
th.tablesorter-headerUnSorted {
    background-image: url(/share/css/contextmenu/images/sort_both.png);
    background-repeat: no-repeat;
    padding-right: 20px;
    background-position: right;
}

th.tablesorter-header {
    background-image: url(/share/css/contextmenu/images/sort_both.png);
    background-repeat: no-repeat;
    padding-right: 20px;
    background-position: right;
}

th.tablesorter-headerDesc {
    background-image: url(/share/css/contextmenu/images/sort_desc.png);
    background-repeat: no-repeat;
    padding-right: 20px;
    background-position: right;
}

th.tablesorter-headerAsc {
    background-image: url(/share/css/contextmenu/images/sort_asc.png);
    background-repeat: no-repeat;
    padding-right: 20px;
    background-position: right;
}
1 голос
/ 14 декабря 2011

Попробуйте это: 

th.headerSortUp span{
    background: url("arrow-up.gif") right center no-repeat;
    padding-right: 20px;
}

th.headerSortDown span{
    background: url("arrow-up.gif") right center no-repeat;
    padding-right: 20px;
}

И добавьте span к вашему th

Редактировать: Изменен div для span (см. Комментарии ниже)

0 голосов
/ 18 октября 2013

Мне просто не хватало класса "таблиц", добавленного в таблицу. Я добавил это, и это решило. Пусть это кому-нибудь поможет:)

0 голосов
/ 17 апреля 2013

Если вы каскадируете их таблицу стилей, она будет выглядеть точно так же, как на сайте TableSorter.Вам даже не нужно вынимать его из пакета.Просто добавьте эту строку после объявления таблицы стилей: 

<link href="[YOUR PATH TO]/tablesorter/themes/blue/style.css" rel="stylesheet" type="text/css" />
0 голосов
/ 04 декабря 2012

В моем случае это сработало: 

table.tablesorter th.tablesorter-headerSortUp {
  background-image: url(../images/asc.gif);
}

table.tablesorter th.tablesorter-headerSortDown {
  background-image: url(../images/desc.gif);
}

Файл Style.css, загруженный из Интернета, может содержать только класс headerSOrtUp, но это работает только с классом tablesorted-headerSortUp, поэтому они должны были его изменить.

Надеюсь, это сэкономит кому-то время.

...