如果边框折叠：分离，我如何才能看到表格单元格边框？答案

【问题标题】：How can I get to see table cell borders if border-collapse: separate?如果边框折叠：分离，我如何才能看到表格单元格边框？
【发布时间】：2015-04-04 06:43:33
【问题描述】：

这似乎没有显示边框，尽管这应该是 CSS 属性 border-collapse 的唯一原因：

http://jsfiddle.net/pz6azgj8/

我在这里犯了什么错误吗？或者这不是在当前浏览器（FF35/IE11）中实现但没有实现？

【问题讨论】：

tr 不是您的边界声明的有效目标。尝试在 td 或 table 上进行操作
在 CSS3 规范中，tr 应该是无效元素吗？我在那里找不到那个声明。
问题不在于 CSS3 规范。 border-collapse 是 CSS2.1&2 规范的一部分。问题在于，当您将border-collapse 设置为separate 时，您正在更改边框呈现模式，这会更改哪些元素有效接收边框。在您触发的边框渲染模式（以及默认模式，顺便说一句）中，您是说tr 无法接收边框，因为tr 没有边框而不是分隔行/单元格通过border-spacing ...因此border-collapse: separate。有意义吗？

标签： css

【解决方案1】：

在表格CSS上做border-collapse:collapse，它修复了它。

【讨论】：

我知道，但我想知道如果设置了border-collapse: separate，为什么边框会消失。我看不出发生这种情况的原因。我实际上希望将边框分开。

【解决方案2】：

http://www.w3.org/TR/CSS21/tables.html

声明：

17.6 边框
[...]
'border-collapse'
价值：崩溃 |分开 |继承
首字母：分开
[...] 值 'separate' 选择分离边框边框模型。值 'collapse' 选择折叠边框模型。 [...]

17.6.1 分离边框模型
[...] 行、列、行组和列组不能有边框（即，用户代理必须忽略这些元素的边框属性）。 [...]

17.6.2 折叠边框模型
在折叠边框模型中，可以指定围绕单元格、行、行组、列和列组的全部或部分的边框。

你说

这似乎没有显示边框，尽管这应该是 CSS 属性 border-collapse 的唯一原因

这可能确实是该属性存在的一个原因，以允许<tr>s 的边框 - 但反过来：separated 是默认值，collapse 允许您在表格周围创建这些边框-行。

【讨论】：

不妨也为标题中的问题添加一个答案——如果边框折叠是分开的，我如何查看表格单元格边框？ -- 即为td 元素应用边框。