Struts2中的分页没有捕获标题行的CSS

Question

我有一个Struts2应用程序，我正在使用Pagination with＆＃39; display＆＃39;标签。 这是显示代码

<display:table id="reqtablenew" name="requestlist" requestURI="" pagesize="4" class = "newreqtable">

    <display:column title="Select" >
    <input type="radio" name="reqradio" />
    </display:column>

    <display:column title="Request ID" property="requestid"></display:column>
    <display:column title="Requestor" property="requestor"></display:column>
    <display:column  title="Approver" property="approver"></display:column>
    <display:column  title="Status" property="status"></display:column>
    <display:column  title="Product" property="product"></display:column>
    <display:column  title="Version" property="version"></display:column>
    <display:column  title="Source" property="source"></display:column>
    <display:column  title="Destination" property="destination"></display:column>

</display:table>

虽然它有效，但是当我将样式应用于表格时，在其类名称＆＃34; newreqtable＆＃34;下，我发现它是关注的

对于我可能做错的任何想法都会非常受欢迎。 这是相关的css：

这是一个显示相关css的小提琴 http://jsfiddle.net/Gz668/

Answer 1

代码中有几个问题，如果你有兴趣更深入地了解它们，只需看看第4个（你的）和第5个（我的）小提琴版本之间的差异：

• 某些选择器是错误的（.something table表示具有类.something的对象的表后代，您希望table.something使用该类定位表）;
• 有些属性是错误的（几乎所有的-moz内容都搞砸了.jsFiddle通过用红色着色来提醒你;
• 再次设置了很多默认属性，例如text-align:left或color: #000000;这不是错误，但会产生噪音并阻碍您更快地工作;
• 表格默认为display:table，无法围绕边框。将它设置为显示块或（像我一样），使用外部div创建边框和阴影;
• 使用CSS Reset，我在小提琴中链接normalize.css，删除浏览器默认应用的所有不需要的内容，并对代码拥有更多控制权。

查看 running example 。

代码也较小：

div.borderDiv{
    border: 1px solid black;
    border-radius: 14px;
    box-shadow: 10px 10px 5px #888888;
    width: 80%;
}

.newreqtable {    
    width:100%;
}


.newreqtable th:first-child {
    border-top-left-radius:14px;    
}
.newreqtable th:last-child {
    border-top-right-radius:14px;
    border-right: none;
}
.newreqtable tr:last-child td:first-child {
    border-bottom-left-radius:14px;
}
.newreqtable tr:last-child td:last-child {
    border-bottom-right-radius:14px;
}

.newreqtable tr:last-child td {
    border-width:0px 1px 0px 0px;
}
.newreqtable tr td:last-child {
    border-width:0px 0px 1px 0px;
}
.newreqtable tr:last-child td:last-child {
    border-width:0;
}


.newreqtable tr:hover td {
    background-color:#ffaaaa;
}
.newreqtable td {
    vertical-align:middle;
    background-color:#ffffff;
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    padding:7px;
    font-size:10px;
    font-family:Helvetica;
    font-weight:normal;
}
.newreqtable th {
    background:-o-linear-gradient(bottom, #ff5656 5%, #7f0000 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #7f0000));
    background:-moz-linear-gradient(center top, #ff5656 5%, #7f0000 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#7f0000");
    background: -o-linear-gradient(top, #ff5656, 7f0000);
    background-color:#ff5656;
    border-color:white;
    border-style: solid;
    text-align:center;
    font-size:14px;
    font-family:Arial;
    font-weight:bold;
    color:#ffffff;
    border-width:0px 1px 1px 0px;
}