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

Answer 2

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

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

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

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

2 个答案: