css - 如何在dataTable中的每一行之间添加空格

Question

如何在表格的每一行之间添加一些空格。我试试这个

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

但是没用

我用的是primefaces 2.2.1

Answer 1

首先，检查您的浏览器品牌/版本:border-spacing是not supported在 IE6/7 上。其次，border-spacing仅在 border-collapse 时有效表的设置为 separate .可能某些 PrimeFaces 特定样式表已将其设置为 collapse (这是一般 UI 首选的边框表示形式)。这样border-spacing行不通。

因此，所有这些都应该有效，包括最后声明中的 IE6/7 hack:

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

与

<p:dataTable styleClass="yourTableClass">

(类优于内联样式)

---

更新:根据屏幕截图和评论，PrimeFaces 包装生成的 HTML <table>在 <div> 里面并应用 style/styleClass在它上面而不是在包裹的 <table> 上.我原本没想到。在这种情况下，您需要使用以下 CSS 声明:

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