数据表 - 边框样式不适用于空的表格单元格

Posted 2023-05-07

【中文标题】数据表 - 边框样式不适用于空的表格单元格

【英文标题】：Datatables - Border style not applied to table cell that is empty

【发布时间】：2015-06-28 09:50:33

【问题描述】：

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

无论我在 td 内容中有空行，单元格的边框都会变得有趣和扭曲。见下图。

我查看了空表格单元格之间的样式差异，看起来是否存在空单元格数据表不包含单元格的边框属性。见下文....

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

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

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

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

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

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

我正在使用数据表 1.9.4。

谢谢

【问题讨论】：

请显示您的确切 CSS，最好使用 jsfiddle 重现问题。显然，您有一些自定义的 CSS 推翻了默认的 dataTables CSS - 您必须包含它。

嗨，大卫。感谢您的回复。我会尽快更新完整的 CSS。我想挑战你的反应。如果我的 css 覆盖了数据表 css 那么样式对于那些有内容的行是如何工作的？ IE。我认为不可能覆盖空 td 的样式，除非您在 javascript 中编写我没有的样式。如果我错了，请告诉我。

【参考方案1】：

作为对 cme​​ts 中友好的挑战的回应：您确实可以在不使用 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/

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

【讨论】：

谢谢。我不知道这可以使用 pre css 解决方案来完成。对我来说是一个很好的学习。

【参考方案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 帮助我解决问题。