2

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 Rendering of the table

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

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

Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
Ankur Chachra
  • 131
  • 5
  • 17
  • Can you yourself read the CSS in the screenshot that you've pasted? Creating a [fiddle](http://jsfiddle.net) will get you a better response. – Chandranshu Nov 13 '13 at 08:37
  • My bad. I have added a fiddle for the css now. – Ankur Chachra Nov 13 '13 at 09:17
  • It's not clear to me from the question or the fiddle what is it that you want. Your fiddle shows the title row with red background. Is it not what you want? Also, add a few rows of dummy data so that the problem becomes more apparent. BTW, the "Tidy Up" button on jsfiddle.net is super-useful. – Chandranshu Nov 13 '13 at 09:24
  • I want the title row just as it is in the fiddle. However, when i run my code, instead of applying the css to the title row, the css gets applied to the first row of the table. check this http://i.stack.imgur.com/3Qx6a.jpg – Ankur Chachra Nov 13 '13 at 09:34
  • Great. Now we are getting somewhere. How did you create the HTML in the fiddle? Did you type it out or did you copy it from the browser's "View source" option? If you did the former, I'll recommend you to do the latter. Also, see my previous comment and add some data rows there to reproduce the problem. – Chandranshu Nov 13 '13 at 09:43
  • Here's the updated fiddle with the html copied from the browser : http://jsfiddle.net/Gz668/3/ – Ankur Chachra Nov 13 '13 at 10:12
  • Heyy I figured the problem out. Here's the new fiddle now. thanks! http://jsfiddle.net/Gz668/4/ But somehow, the width of the title row is getting reduced. Any thoughts why that might be? – Ankur Chachra Nov 13 '13 at 10:30
  • Are those `display` tags any `struts2` plugin ? Doesn't appear to me though, it's better to switch to `struts2` since `struts1` is officially deprecated. – coding_idiot Nov 13 '13 at 21:53
  • @coding_idiot: that is [displayTag](http://www.displaytag.org/1.2/) (I don't like it but it's used with both S1 and S2) – Andrea Ligios Nov 13 '13 at 23:51

1 Answers1

2

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;
}
Community
  • 1
  • 1
Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243