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

Question

我试图弄清楚如何仅在具有单元格间距的表格内添加边框。当我做：

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

它几乎可以正常工作，只是没有间距的单元格。如何做到这一点？

谢谢

Answer 1

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

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

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

Answer 2

如果您尝试为已定义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;
}