jquery tablesorter CSS箭頭圖標

這實際上是一個比jQuery問題更多的CSS問題。我使用tablesorter jQuery插件動態地對錶進行排序。jquery tablesorter CSS箭頭圖標

下面是它看起來像現在： 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") 
}

我與目前執行的問題是，箭頭一路過來在標題的右側。在上面的例子中，表格按照級別進行排序，但它幾乎看起來像是按位置排列的。

是否有簡單的方法將箭頭移到左側，因此它直接位於「級別」標籤末尾的右側？

來源

2011-12-14 numegil

你可以請張貼HTML代碼或鏈接到一個例子。 – Jasper 2011-12-14 17:36:28

放置一個span標籤在你th和風格它：

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

來源

2011-12-14 17:36:44 janhartmann

如果我理解正確，這會將偏移量硬編碼爲15像素，對吧？問題在於不同的標題具有不同的標籤長度。 – numegil 2011-12-14 17:40:36

它將從內聯元素（跨度）硬編碼一個15px的偏移量:-) – janhartmann 2011-12-14 17:41:31

試試這個：

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跨度（見下面的評論）

來源

2011-12-14 17:40:32 SlavaNov

在我而言，這工作：

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

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

的style.css從網上下載cantained只有headerSOrtUp類，但這僅適用於tablesorted-headerSortUp類，因此他們必須改變它。

希望它可以節省一些時間給別人。

來源

2012-12-04 16:32:37 mArtinko5MB

如果您將它們的樣式表級聯起來，它將看起來完全像TableSorter網站上的樣子。你甚至不需要將它從包裝中移出。只需在樣式表聲明後添加下面這行：

<link href="[YOUR PATH TO]/tablesorter/themes/blue/style.css" rel="stylesheet" type="text/css" />

來源

2013-04-16 21:29:47 elgati

我只是缺少將「tablesorter」類添加到表中。我補充說，它解決了。願這幫助某人:)

來源

2013-10-18 05:20:01

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; 
}

來源

2015-12-07 16:49:08

jquery tablesorter CSS箭頭圖標

回答

相關問題