的tablesorter：我怎样才能改变排序箭头的

我执行jQuery的的的tablesorter位置。我需要对列的标题改变排序箭头的位置。的tablesorter：我怎样才能改变排序箭头的

以下是我迄今所做的：

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

这工作得很好了列而不是它们重叠于标题或走多远就权的人。
有没有办法保持箭头总是显示非常靠近列标题？

来源

2012-08-03 GingerHead

如果您正在使用默认的蓝色主题，您只需更改箭头的背景位置，然后添加左填充以将文本从其移开即可 - demo

table.tablesorter thead tr .header { 
    background-position: left center; 
    padding-left: 20px; 
}

来源

2012-08-04 18:11:45 Mottie

这种方法是尝试和真实 - 简单。 – 2012-08-06 14:15:09

注意：这个答案是为原始tablesorter v2.0.5。要移动我的[fork of tablesorter]（http://mottie.github.io/tablesorter/docs/）上的箭头，请参阅@ mezzoforte的答案。 – Mottie 2016-03-18 18:17:51

你可以在这里你更改类列名后添加一个跨度。像：

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

这个问题似乎是相似的，并提供类似于上述的解决方案：jquery tablesorter CSS arrow icons

来源

2012-08-03 11:52:12

但是这个地方的排序箭头正好旁边列标题，文字永不重叠？我的帖子的一点是部分，您添加背景而不是单元格。改变机制可以用你自己的替换。 – 2012-08-03 12:01:08

对不起，我错过了关于JQuery tablesorter（我以前没有用过）的部分。tablesorter是否将箭头插入标记或者是您控制的东西？ – 2012-08-03 12:06:34

我更新了我的答案。 – 2012-08-03 12:14:34

截至最新的dataTables v.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-08 20:18:41

不错的注意花花公子 – GingerHead 2014-12-08 21:40:57

接受的答案并没有为我工作。为了保持排序箭头只是为了表头文字左，这工作：

.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-11 20:40:25 mezzoforte

这个CSS实际上是我的[fork of tablesorter]（http://mottie.github.io/tablesorter/docs/），我的回答是针对原始tablesorter v2.0.5。 – Mottie 2016-03-18 18:16:18

的tablesorter：我怎样才能改变排序箭头的

回答

相关问题