无法在 Firefox 上设置数据表边框 css

Question

当我将数据表的 css 规则设置为隐藏垂直边框时，它可以工作，但是当您将鼠标悬停在数据表行中时，边框会再次出现。

如果您按照以下步骤操作，您可以在 primefaces 展示中重现此内容。

1. 打开 Firefox（至少我在最新版本 31.0 中看到了这一点）。

2. 转到http://www.primefaces.org/showcase/ui/data/datatable/selection.xhtml

3. 向下滚动到“单行点击”。

4. 单击“Single with Row Click”数据表第一行的检查元素。

5. 修改以下规则：

   .ui-datatable tbody td {
    border-color: inherit;  
   }
   

   进入这个：

   .ui-datatable tbody td {
      border-color: inherit;
      //this rule should remove the vertical border from the datatable.
      border-style: none !important;
    }
   

6. 现在在行中移动鼠标，您将看到列之间的垂直边框显示出来并隐藏在某些行上。

如果您能够重现此问题/错误，请提供解决方法，我们将不胜感激。

我尝试更改.ui-state-hover，但仍然是同样的问题。

这是一个预览。

Answer 1

这会对你有所帮助....

.ui-datatable tbody td {
    border-bottom-style: double;
    border-left-style: hidden;
    border-right-style: hidden;
    border-top: 1px solid #000000 !important;
}