html - CSS技巧在单元格不为空时在表格和单元格上显示边框，否则不显示边框

Question

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

score 4 · Accepted Answer

4

请参阅空单元格CSS 属性。

于 2008-11-26T19:10:14.753 回答

score 1 · Accepted Answer

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

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

要了解有关 CSS3 选择器的更多信息，请单击此处

score 0 · Accepted Answer

给空单元格一个类名，给非空单元格一个类名。一个类指定边界，另一个没有。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

看起来 strager 建议的 empty-cells 属性可能会奏效。如果它不能满足您的需求，我会考虑使用一些聪明的 javascript 库，例如jQuery。您可能可以设置一个钩子来更新单元格的边框样式为 getBorderStyle(this) 当这个单元格的内容发生变化时。

在此处查看 jquery“更改”钩子：http: //docs.jquery.com/Events/change 如果您选择所有单元格（您可以使用 css 选择器执行此操作）并添加一个更改钩子以运行您编写的某些函数调用 updateBorder() 或类似的，你应该很好。我想它会是这样的：

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

score 0 · Accepted Answer

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

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

6 回答 6