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

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元素，因此它不会拉伸(stretch) <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>标签。您可以将其添加到目标所有 <a> <th> 内的标签标签。

th a {
    text-underline:none;
}