如何在显示标签中指定排序图标的位置

Question

我已经使用“sortable=true”对 displaytag 中的列进行了排序...但是我想在列的最右侧显示排序图标...我该怎么做？ 这里只提一栏供大家参考……

<display:column  property="issuerName" scope="col" sortable="true" title="${issuerName}"  headerClass="hixTableHeader" class="displayTagtd" /> 

CSS 代码：

th.sortable a {
    background-image: url(../images/common/header/arrow_off.png);
    background-repeat: no-repeat;
    background-position:right;
    text-decoration: none;
    padding-right:25px;
    padding-left: 25px;

}

th.order1 a{
    background-image: url(../images/common/header/arrow_down.png);
    background-position:right;
    background-repeat: no-repeat;
    text-decoration: none;
    padding-right:25px;
    padding-left: 25px;
}

th.order2 a{
    background-image: url(../images/common/header/arrow_up.png);
    background-repeat: no-repeat;
    text-decoration: none;
    background-position:right;
    padding-right:25px;
    padding-left: 25px;
}

Answer 1

尝试将其放在<th> 而不是<a>。 <a> 是一个 display:inline 元素，因此它不会拉伸 <th> 的整个大小。

th.sortable {
    background-image: url(../images/common/header/arrow_off.png);
    background-repeat: no-repeat;
    background-position:right;
}

th.order1 {
    background-image: url(../images/common/header/arrow_down.png);
    background-position:right;
    background-repeat: no-repeat;
}

th.order2 {
    background-image: url(../images/common/header/arrow_up.png);
    background-repeat: no-repeat;
    background-position:right;
}

或者，您可以应用以下内容，这将使<a> 填充<th> 这可能更可取，因为您可以单击<th> 上的任意位置以激活排序。

th a {
    display:block;
    width:100%;
    height:100%;
}

更新

确保您也保留当前样式，要保留下划线，您需要确保它仍然针对您的 <a> 标记。您可以添加它来定位<th> 标签内的所有<a> 标签。

th a {
    text-underline:none;
}

Answer 2

您可能需要更改包含<display:column> html 代码的模板文件