如何在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 上是 not supported。其次，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">

（优先类优于内联样式）

---

更新：根据屏幕截图和 cmets，PrimeFaces 将生成的 HTML <table> 包装在 <div> 中，并在其上应用 style/styleClass 而不是包装的<table>。我没想到的是。在这种情况下，您需要以下 CSS 声明：

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

Answer 2

不太确定primefaces，所以不熟悉哪些属性可以用于哪些位..

但是border-spacing 还不能真正可靠地用作样式.. 表格仍然确实需要“老式”cellspacing 属性

<p:dataTable cellspacing="10"> 有效吗？

根据新信息更新

改变规则

.yourTableClass {}

到

div div.yourTableClass table {}

如果你的 layout.css 在 skin.css 之前被调用，这应该使规则仍然覆盖它

你需要上面提到的 IE hack，也许你也需要让它变得具体