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

Question

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

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

但它不起作用

我使用了primefaces 2.2.1

Answer 1

首先，在IE6 / 7上检查您的浏览器make / version：border-spacing是not supported。其次，border-spacing仅在表的border-collapse设置为separate时才有效。可能一些PrimeFaces特定样式表已将其设置为collapse（这是边框表示的一般UI首选形式）。这样border-spacing将无效。

因此，所有这一切都应该有效，包括最后声明的IE6 / 7黑客攻击：

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

与

<p:dataTable styleClass="yourTableClass">

（喜欢内联样式的课程）

---

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

<table>

Answer 2

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

但border-spacing无法真正可靠地用作样式..表仍然需要“老式”cellspacing属性

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

根据新信息更新

更改规则

.yourTableClass {}

到

div div.yourTableClass table {}

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

你需要上面提到的IE hack，也许你需要把它作为特定的