如何在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是不支持的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>在 a 中，<div>并在其上应用style/styleClass而不是包装的<table>. 我没想到的是。在这种情况下，您需要以下 CSS 声明：

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