How to add spaces between each line in dataTable

Question

How to 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 simple elements 2.2.1

Answer 1

First, check your browser make / version: border-spacing not supported in IE6 / 7. Secondly, border-spacing only works when the border-collapse parameter of the table is set to separate . Probably some special PrimeFaces style sheet set it to collapse (which is the preferred form for representing borders in the common user interface). Thus, border-spacing will not work.

Thus, all this should work, including IE6 / 7 hacking the latest announcement:

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

with

 <p:dataTable styleClass="yourTableClass"> 

(prefer classes by inline styles)

---

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

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

Answer 2

not quite sure of connectivity, so I don’t know which attributes can be used for which bits.

but border-spacing cannot really be reliably used as a style yet. Tables still need the old-fashioned cellspacing attribute

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

updated according to new information

change the rule

 .yourTableClass {} 

to

 div div.yourTableClass table {} 

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

and you will need to hack IE as stated above, and you may need to do this as special.