Datatables - 边框样式未应用于 table 空单元格

Question

我的数据tables 存在样式问题。我支持的浏览器是 IE 6 到 10。

每当我在 td 内容中有空行时，单元格的边框就会变得有趣并扭曲。见下图。

我查看了空 table 单元格之间的样式差异，如果有空单元格数据 tables 似乎不包括边框属性细胞。见下文....

HTML 没有空单元格的行的样式如下...

没有空单元格的行的样式如下...

HTML 具有空单元格的行如下...

具有空单元格的行的样式如下...

有人可以帮我解决这个问题吗？

是不是因为没有内容时td标签是空标签？ css 是否对空标签有不同的应用？没想到...

我正在使用数据 tables 1.9.4.

谢谢

Answer 1

作为对评论中友好挑战的回应：您确实可以在不使用 javascript 的情况下覆盖空 <td> 的样式。考虑这个例子，目标 dataTables 1.9.4（下面的演示）

table.dataTable td {
   border-bottom: 1px solid red;
}
table.dataTable {
    border-collapse: separate;
    empty-cells: hide;
}

演示 -> http://jsfiddle.net/f5Lvd4xa/

打开fiddle，尝试注释掉最后的CSS class并更新。没有看到您的自定义内容 CSS - custom-myer.css 和 styles.jsp - 我无法知道 sure 在您的特定情况下到底发生了什么，但以上内容与您的体验非常相似。

Answer 2

我认为我现在可以澄清的一个关键问题是该问题特定于 ie6，并且在 ie10 及更低版本中运行处于兼容模式时也是如此。当我在 ie10 中关闭兼容模式时，我没有遇到问题。

在进一步调查时，发现了针对此问题记录的数据表错误。 https://issues.jboss.org/browse/RF-1236

作为解决该问题的方法，我使用 javascript 执行以下操作...

   $('#search-results-table')
   .on('processing.dt',function( e, settings, processing ){
       if (processing){
               ....

       }else {
               ....
               $('#search-results-table td:empty').html('&nbsp;');
       }
       } )

即处理后为空单元格添加。它解决了这个问题。特别感谢davidkonrad帮我解决了问题。

Datatables - 边框样式未应用于 table 空单元格

Datatables - Border style not applied to table cell that is empty

css

datatable

jquery-datatables