Pagination in Struts2 not capturing css for the title row

Question

I have a Struts2 application in which I am using Pagination with 'display' tag. Here is the display code

<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>

Though it works, but when I apply styling to the table, under its class name "newreqtable", I find it to be following

Any thoughts as to what I might be doing wrong would be very welcome. Here's the associated css :

Here's a fiddle showing the associated css http://jsfiddle.net/Gz668/

Answer 1

There are several problems in the code, if you are interested in knowing them more deeply just look at the differences between the 4th (your) and 5th (mine) versions of the fiddle :

• some selectors are wrong (.something table means a table descendant of an object with class .something, you want table.something to target a table with that class);
• some attributes are wrong (pretty much all the -moz stuff is messed up. jsFiddle alerts you by colouring them in red);
• there are a lot of default properties set again, like text-align:left or color: #000000; this is not an error but generates noise and prevent you to work faster;
• table has display:table by default, and can't round the borders. Set it to display block or (like I did), use an outer div to create the border and the shadow;
• use a CSS Reset, I linked normalize.css in the fiddle, to remove all the unwanted stuff that browsers apply by default, and have more control over your code.

Take a look at the running example.

The code is smaller too:

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;
}