CSS - 非重叠/非双边框与边框折叠：分离；答案

【问题标题】：CSS - Non-overlapping / no-double borders with border-collapse: separate;CSS - 非重叠/非双边框与边框折叠：分离；
【发布时间】：2017-09-06 18:19:51
【问题描述】：

我需要一种在表格中添加非重叠/非双边框的方法（这需要是使用选择器等的通用类）：

http://jsfiddle.net/MadLittleMods/X3VMJ/

我需要border-collapse: separate;，因为我在标题内容上使用了边框半径（不在示例中）。

td:first-child 几乎可以工作，但它在“底部信息”td 中添加了额外的边框（参见示例）

添加td:only-child 和td:not([colspan]):first-child 是迄今为止我最好的线索，但这仍然与“底部信息”td 混淆，因为它只有一件事。

我目前正在使用td:not([colspan]):first-child，它的效果很好，除了带有单个单元格的行用 colspan 在整个表格中延伸..

【问题讨论】：

不确定我在这里看到了问题吗？

标签： css border css-tables overlap

【解决方案1】：

为什么不将top 和left 边框放在table 元素上，而将它们留给单元格呢？点赞：http://jsfiddle.net/X3VMJ/6/

【讨论】：

我需要在标题的左右两边都有border-radius。我更新了示例：jsfiddle.net/MadLittleMods/X3VMJ
@MLM，我没有跨浏览器测试，但它似乎对我有用：jsfiddle.net/X3VMJ/8
感谢 eyelidlessness 这是解决方案：jsfiddle.net/MadLittleMods/X3VMJ -- 我不确定是否应该将此标记为已解决。由于评论有帮助，而不是回复。我将在 3 小时内添加回复（回复自己主题的最短等待时间）并对其进行正确解释。