How-to draw thin lines about cells in a JSF DataTable?
195661Jan 5 2006 — edited Jan 5 2006How do you draw thin lines about cells in a JSF DataTable?
With css I can draw the border around the entire table but I haven't found the magic combination for thin lines between the column and rows. (I tried "Rules" but the lines drawn were the ugly double lines.)
Below is my datatable and css. It draws a nice looking solid border aound the entire table. "approvalsRow" and border properties in approvalsColx was one of my many unsuccessful attemps for lines between the rows and columns. How would it be changed (or discarded and rewritten) to draw thin lines about the cells? Any tips would be greatly appreciated.
==============================================
<h:dataTable value="#{productApprovalBB.gpaApprovals}"
var="approvals"
styleClass="approvals"
headerClass="approvalsHeader" columnClasses="approvalsCol1,approvalsCol2,approvalsCol3,approvalsCol4"
rowClasses="approvalsRow">
(balance of dataTable omitted)
==============================================
.approvals {
border-color: Black;
border-style: solid;
border-width: thin;
}
.approvalsHeader {
text-align : center;
font-style : italic;
font-weight : bold;
}
.approvalsRow {
border-color: Blue;
border-style: solid;
border-width: thin;
vertical-align: top;
}
.approvalsCol1 {
text-align: center;
width: 75pt;
}
.approvalsCol2 {
text-align: left;
width: 300pt;
border-left: 1pt;
border-color: Black;
}
.approvalsCol3 {
text-align: center;
width: 75pt;
border-left: 1pt;
border-color: Black;
}
.approvalsCol4 {
text-align: center;
width: 75pt;
border-left: 1pt;
border-color: Black;
}
==============================================
Regards,
Al Malin