Question

我遇到了数据表的样式问题。我支持的浏览器是IE 6到10.

如果我在td内容中有空行，则单元格的边框变得有趣且扭曲。见下图。 enter image description here

我已经看过空表格单元格之间的样式差异，看起来如果有一个空单元格数据表不包含单元格的边框属性。见下文......

没有空单元格的行的HTML样式如下... enter image description here

没有空单元格的行的样式如下... enter image description here

包含空单元格的行的HTML如下... enter image description here

具有空单元格的行的样式如下... enter image description here

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

是否因为没有内容时td标签是空标签？对于空标签，css是否会以不同方式应用？我不这么认为......

我正在使用数据表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;
}

演示 - ＆gt;的 http://jsfiddle.net/f5Lvd4xa/

打开小提琴，尝试注释掉最后一个CSS类并更新。如果没有看到自定义CSS的内容 - custom-myer.css和styles.jsp - 我无法知道确定在您的特定情况下究竟发生了什么，但上面几乎看起来像你的经历。

Answer 2

我认为我现在可以澄清的一个关键问题是问题是针对ie6以及在ie10及以下的兼容模式下运行时。当我在ie10关闭兼容模式时，我没有问题。

在进行更多调查时，会针对此问题记录数据表错误。 the ones given in Stratboy answer

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

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

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

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

数据表 - 未应用于空单元格单元格的边框样式

2 个答案: