Question

我正在实施 jquery 的 tablesorter 。我需要相对于列的标题更改排序箭头位置。

这是我到目前为止所做的：

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

这适用于列，但不适用于与标题重叠或远离右侧的其他人。< 有没有办法让箭头始终显示在列标题旁边？

Answer 1

如果您使用默认的蓝色主题，您只需更改箭头的背景位置，然后添加左边距以将文字移离它 - demo

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

Answer 2

截至最新的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;
}

Answer 3

您可以在更改类的列名后面添加一个范围。例如：

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

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

Answer 4

接受的答案对我不起作用。为了将排序箭头保持在表头文本的 left 中，这有效：

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

.tablesorter-header-inner{
  padding-left: 25px;
}

TableSorter：如何更改排序箭头的位置

4 个答案: