blocks|key|4129024|text|请参见empty-cells+CSS属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4129025|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS2/tables.html#empty-cells^0|3|B|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

See the <a href="http://www.w3.org/TR/CSS2/tables.html#empty-cells" rel="nofollow noreferrer">empty-cells</a> CSS property.

blocks|key|62534|text|使用纯CSS实现这一点的唯一方法依赖于一个非常现代的浏览器。您需要使用CSS高级选择器来完成此操作。例如，您可以使用tr:empty来查找没有子元素的单元格，对于纯文本，您需要做更多的工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|62535|不幸的是，这些只存在于CSS3中，所以如果你不能使用javascript或触摸标记，那么你将只能在最新的浏览器中完成。|62536|了解有关CSS3选择器Click+Here的更多信息|offset|length|62537|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-selectors/^0|0|0|B|A|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

The only way to do this with pure CSS relies on a very modern browser. You'll need to use CSS advanced selectors to accomplish this. For example, you can use tr:empty to find the cells with no children elements in them, for plain text you'll need to do some more. 

Unfortunately, these only exist in CSS3, so if you can't use javascript, or touch the markup, then you'll only be able to accomplish in the very latest browsers. 

To learn more about CSS3 selectors <a href="http://www.w3.org/TR/css3-selectors/" rel="nofollow noreferrer">Click Here</a>

blocks|key|899535|text|为空单元格指定一个类名，为非空单元格指定另一个类名。一个类指定边框，另一个没有边框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|899536|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Give the empty cells one class name and the non-empty ones another. One class specifies a border, the other without.

blocks|key|62415|text|据我所知，这不在CSS的能力范围内，我能想到的最佳选择是在填充数据时通过服务器端代码动态应用类，或者在页面加载到浏览器中后通过JavaScript动态应用类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|62416|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

To the best of my knowledge, this isn't within the capabilities of CSS, the best option I can think of is to apply classes dynamically either through server-side code while populating the data, or through JavaScript once the page has been loaded into the browser.

blocks|key|4129063|text|看起来，strager建议的empty-cells属性可能会起到作用。如果它不能满足您的需求，我会考虑使用一些聪明的javascript库，比如jQuery。您可以设置一个钩子，以便在单元格的内容发生更改时将该单元格的边框样式更新为getBorderStyle(+this+)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4129064|看看这里的jquery+"+change“钩子：http://docs.jquery.com/Events/change如果您选择了所有的单元格(可以使用css选择器)，并添加了一个change钩子来运行您编写的某个名为updateBorder()的函数或类似的函数，那么您应该很好。我想应该是这样的：|4129065|$("table.someClass+td").change(function()+{+updateBorder(this)+})|code-block|syntax|javascript|4129066|entityMap|0|LINK|mutability|MUTABLE|url|http://www.jquery.com/|1|http://docs.jquery.com/Events/change^0|20|6|0|0|O|10|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

It looks like the empty-cells property suggested by strager might do the trick. If it doesn't do what you need, I would look at using some clever javascript library like <a href="http://www.jquery.com/" rel="nofollow noreferrer">jQuery</a>. You can probably set a hook to update the border style of the cell to be getBorderStyle(this) When the content of this cell change. 

Look at the jquery "change" hook here: <a href="http://docs.jquery.com/Events/change" rel="nofollow noreferrer">http://docs.jquery.com/Events/change</a>
If you select all your cells (which you can do using a css selector) and add a change hook to run some function you write called updateBorder() or some such, you should be good. I imagine it would be something like this:

<pre><code>$("table.someClass td").change(function() { updateBorder(this) })
</code></pre>

blocks|key|3284026|text|单元格边框的渲染在一定程度上取决于是否折叠边框。如果没有单元格内容，则默认情况下不显示折叠边框。这可以通过使用CSS属性empty-cells来切换。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3284027|如果要折叠边框，则失去了基于单元格内容控制边框显示的能力。|3284028|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS2/tables.html#empty-cells^0|1O|B|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Rendering of cell borders is partly dependant on if you are collapsing borders or not. If they are not collapsed border are not show by default if there is no cell content. This can be switched by using the CSS property <a href="http://www.w3.org/TR/CSS2/tables.html#empty-cells" rel="nofollow noreferrer">empty-cells</a>.

If you are collapsing borders you loose the abillity to control border display based on the presence of cell content.

Is there any way to make sure that a table and cells it contains have a border only when the cells are not empty?
If all the cells of the table are empty, then no border should be visible.

CSS Trick to show border on table and cells when cells are not empty and show no border otherwise

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

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

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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