CSS Trick在单元格不为空时显示表格和单元格上的边框，否则不显示边框

Question

有没有办法确保它包含的表格和单元格只有在单元格不为空时才有边框？ 如果表格的所有单元格都是空的，则不应显示任何边框。

Answer 1

请参阅empty-cells CSS属性。

Answer 2

使用纯CSS执行此操作的唯一方法依赖于非常现代的浏览器。您需要使用CSS高级选择器来完成此任务。例如，您可以使用tr：empty来查找其中没有子元素的单元格，对于纯文本，您需要执行更多操作。

不幸的是，这些只存在于CSS3中，所以如果你不能使用javascript或触摸标记，那么你只能在最新的浏览器中完成。

要详细了解CSS3选择器Click Here

Answer 3

为空单元格赋予一个类名称，为非空单元格赋予另一个类名称。一个类指定边框，另一个类没有。

Answer 4

据我所知，这不在CSS的功能范围内，我能想到的最佳选择是在填充数据时通过服务器端代码动态应用类，或者在页面具有JavaScript后通过JavaScript动态应用类已加载到浏览器中。

Answer 5

看起来strager建议的空单元格属性可能会起作用。如果它不能满足您的需求，我会考虑使用一些聪明的JavaScript库，如jQuery。您可以设置一个钩子来更新单元格的边框样式为getBorderStyle（this）当此单元格的内容发生更改时。

在这里查看jquery“change”钩子：http://docs.jquery.com/Events/change 如果选择所有单元格（可以使用css选择器执行）并添加更改挂钩来运行一些名为updateBorder（）的函数，或者其他一些函数，那么你应该很好。我想它会是这样的：

$("table.someClass td").change(function() { updateBorder(this) })

Answer 6

渲染单元格边框部分取决于您是否正在折叠边框。如果没有折叠，如果没有单元格内容，则默认情况下不显示边框。这可以使用CSS属性empty-cells切换。

如果您正在折叠边框，则会根据单元格内容的存在而失去控制边框显示的能力。