4

jqueryのtablesorterを実装しています。列のタイトルに関してソート矢印の位置を変更する必要があります。

これが私がこれまでに行ったことです：

table.tablesorter thead tr .header {
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: 80% 70%;
    cursor: pointer;
}

これは、ある列では問題なく機能しますが、タイトルと重なっている列や右端にある他の列では機能しません。矢印を常に列タイトルのすぐ隣に表示
する方法はありますか?

4

4 に答える 4

9

デフォルトの青のテーマを使用している場合は、矢印の背景位置を変更し、左パディングを追加してテキストをそこから離すだけです -デモ

table.tablesorter thead tr .header {
    background-position: left center;
    padding-left: 20px;
}​
于 2012-08-04T18:11:45.483 に答える
4

最新のdataTablesv.1.10.4 (2014 年 12 月 8 日)で、クラスの名前が変更されました。列タイトルの左側に並べ替え矢印を配置する場合は、次の CSS を使用して目的の結果を得る必要があります。

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled
 {
    background-position: left center;
    padding-left: 20px;
}​
于 2014-12-08T20:18:41.580 に答える
2

受け入れられた答えは私にはうまくいきませんでした。並べ替えの矢印をテーブル ヘッダー テキストのすぐ左側に配置するには、次のようにします。

.tablesorter-header {
  display: table-cell !important;
  vertical-align: middle !important;
  background-position: left center !important;
  padding-left: 20px;
}

.tablesorter-header-inner{
  padding-left: 25px;
}
于 2015-11-11T20:40:25.603 に答える
2

クラスを変更する列名の後にスパンを追加できます..のように：

<tr>Column 1 <span class="sort-arrow" /></tr>

この質問は似ているようで、上記に似た解決策を提供します: jquery tablesorter CSS arrow icons

于 2012-08-03T11:52:12.097 に答える