Question

我知道这有点奇怪，相信我这不是我想做的方式，但我得到了这个项目，现在我必须忍受它。

我有一个可在我的页面上排序的表（使用DisplayTag库创建），并指示正在对哪个列进行排序，将背景图像分配给列标题。

我遇到的问题是图像会在文本上显示（或者在...之后无法用黑色显示：\）显然这是预期的，因为它是背景图像而不是一个实际的形象。

我想知道是否有人知道我可以确保在使用css文本之后才显示背景图像的方法。我意识到改变它将是更聪明的路线，但此时时间是一个因素，改变它需要太多的工作。

感谢任何建议！

代码：

显示标签表定义

<display:table name="results" class="displayTag" sort="list" export="true" pagesize="0" requestURI="queryReportResult.action">  
    <% for (int i=0; i < displayProperties.length; i++) { %>
      <display:column property="<%=displayProperties[i].getName()%>" title="<%=displayProperties[i].getDisplayName()%>" decorator="<%=displayProperties[i].getDecorator()%>" sortable="true" headerClass="sortable" />
    <% } %>
    <display:setProperty name="export.pdf" value="true"/>
    <display:setProperty name="export.xml" value="false"/>
    <display:setProperty name="export.pdf.filename" value="<%=report.getName() + \".pdf\"%>"/>
    <display:setProperty name="export.csv.filename" value="<%=report.getName() + \".csv\"%>"/>
    <display:setProperty name="export.excel.filename" value="<%=report.getName() + \".xls\"%>"/>      
  </display:table>

CSS定义

table.displaytag a {        
    font-size: 10pt;
}

table.displaytag th {
    padding-left: 5px;
    padding-right: 15px;
    font-size: 10pt;
    border-bottom: 1px solid black;
}

table.displaytag th.sorted a,table.displaytag th.sortable th.sortable-right a {
    background-repeat: no-repeat;
    background-position: right;
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
}

table.displaytag th.order1 a {
    background-image: url(../images/down-arrow.png);
    background-position: bottom center;
}

table.displaytag th.order2 a {
    background-image: url(../images/up-arrow.png);
    background-position: bottom center;
}

来自页面的实际代码

<th class="sortable">
<a href="queryReportResult.action?d-49653-s=4&amp;d-49653-o=2&amp;d-49653-p=1">This Info </a></th>
<th class="sortable sorted order1">
<a href="queryReportResult.action?d-49653-s=5&amp;d-49653-o=1&amp;d-49653-p=1">Other Info </a></th>

<th class="sortable">
<a href="queryReportResult.action?d-49653-s=6&amp;d-49653-o=2&amp;d-49653-p=1">Info </a></th>

正如您所看到的那样，当列被排序时，它会获得sorted和order1类，而order1是添加背景图像的类。

Answer 1

假设th中的唯一文字是a标记中包含的文字，您是否可以为background-color指定一个允许其a的{{1}}文字可见？

th > a {
    color: #000;
    background-color: #fff;
    /* other css */
}

这样a的背景位于th背景之上。

或者我错过了一些非常明显的东西？

Answer 2

嗯......这就是我修复这个问题的方法，主要归功于Google：D

我基本上只是将背景图像对齐到底部，然后添加了一个边距底部，以便文本无法一直写到底部。

这是代码！

table.displaytag th.sorted a,table.displaytag th.sortable th.sortable-right a {
    background-repeat: no-repeat;
    background-position: right;
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
}

table.displaytag th.order1 a {
    background-image: url(../images/down-arrow.png);
    background-position: bottom center;
    margin-bottom:15px;
}

table.displaytag th.order2 a {
    background-image: url(../images/up-arrow.png);
    background-position: bottom center;
    margin-bottom:15px;
}

按钮对齐文本下方的背景图像

2 个答案: