How to add spaces between each row in dataTable

Question

How do I add some spaces between each row of the table. I try this

<p:dataTable styleClass="yourTableClass">
    <p:column style="background-color: ##EFF2F9">
         //Content here
    </p:column>
</p:dataTable>

but it does not work

I used primefaces 2.2.1

Answer 1

Firstly, check your browser make/version: border-spacing is not supported on IE6/7. Secondly, the border-spacing only works when the border-collapse of the table is set to separate. Likely some PrimeFaces specific stylesheet has set it to collapse (which is the general UI preferred form of border representation). This way the border-spacing won't work.

Thus, all with all this should work, including the IE6/7 hack on the last declaration:

.yourTableClass { 
    border-collapse: separate; 
    border-spacing: 10px; 
    *border-collapse: expression('separate', cellSpacing = '10px');
}

with

<p:dataTable styleClass="yourTableClass">

(favour classes over inline styles)

---

Update: as per the screenshot and the comments, PrimeFaces wraps the generated HTML <table> inside a <div> and applies the style/styleClass on it instead of on the wrapped <table>. I did not expect that. In such case, you need the following CSS declaration instead:

.yourTableClass table { 
    border-collapse: separate; 
    border-spacing: 10px; 
    *border-collapse: expression('separate', cellSpacing = '10px');
}

Answer 2

not really sure about primefaces, so am not familiar with which attributes can be used on what bits..

but border-spacing can't really be reliably used yet as a style.. tables still really need the "old fashioned" cellspacing attribute

does <p:dataTable cellspacing="10"> work?

updated as per new information

change the rule

.yourTableClass {}

to

div div.yourTableClass table {}

if your layout.css gets called before skin.css this should make the rule still override it

and you will need the IE hack as mentioned above and maybe you'll need to make it as specific too