html - CSS - 仅在表格内使用单元格间距设置边框

Question

我想弄清楚如何仅在具有单元格间距的表格内添加边框。当我这样做时:

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

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

谢谢

Answer 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;
}