CSS - 仅在表格内具有单元格间距的边框答案

【问题标题】：CSS - Border only inside the table with the cell spacingCSS - 仅在表格内具有单元格间距的边框
【发布时间】：2012-11-22 18:07:05
【问题描述】：

我正在尝试弄清楚如何仅在表格内添加边框以及单元格间距。当我这样做时：

table {
  border-collapse: collapse;
  border-spacing: 4px;
}
table td, table th {
  border: 1px solid black;
}

它几乎可以正常工作，只是没有间距的单元格。如何实现？

谢谢

【问题讨论】：

不清楚您要完成什么。
相关 - stackoverflow.com/q/8806161/104380

标签： html css

【解决方案1】：

如果您尝试为已定义 cellspacing 属性的表编写 CSS 规则，解决方案可能是这样的：

table[cellspacing] {
  border-collapse: collapse;
  border-spacing: 4px;
}
table[cellspacing] td, table[cellspacing] th {
  border: 1px solid black;
}

但是给你的桌子上课会更干净、更有效 (<table class="withspace">)。所以你会更经典地做

table.withspace {
  border-collapse: collapse;
  border-spacing: 4px;
}
table.withspace td, table.withspace th {
  border: 1px solid black;
}

编辑：以防万一，如果您只想在单元格中留出一些空间，请在您的 css 中添加一个填充值：

table {
  border-collapse: collapse;
  border-spacing: 4px;
}
table td, table th {
  border: 1px solid black;
  padding: 4px;
}

【讨论】：

事实上我不明白你想要做什么。只需添加单元格间距？
是的，单元格间距，但只有单元格边框
查看我的编辑。是你要找的吗？
不，我正在寻找单元格间距！单元格填充不是我需要的
我没有得到你想要的。但也许这个向导会帮助你：somacon.com/p141.php

【解决方案2】：

发布的 CSS 代码是正确的，并且在符合标准的浏览器上会导致单元格周围（但整个表格周围）出现边框，并且单元格之间的间距为 4px。我想你是在不支持border-spacing 属性的 IE 7 或更早版本上测试的。

恐怕没有比创建一个没有任何边框的表格更简单的解决方法了，并在每个单元格内放置一个内部元素，使该单元格占据除小边距之外的整个单元格，并在内部元素周围绘制边框。这可能会变得很难看，所以我宁愿让 IE 7 上的演示效果欠佳。

（由于某种原因，border-spacing 在 jsfiddle 中似乎不起作用。可能某些通用规则会覆盖设置属性的正常尝试。）

【讨论】：

这可能是 jsFiddle 默认启用 normalize.css （你可以在最左边的窗格中切换），它有一个border-collapse: collapse; 规则。