仅在内部有边框的表格的 4 种制作方法（井字格样式）

你知道的，就像井字格游戏板。 我前几天就在思考如何制作一个只有内部有边框的表格，正如人们所做的那样。 我能想到三种方法。 一种涉及大量的规则，也是我直观的想法，另一种涉及一个已弃用的属性，而另一种则非常简单，感觉有点像 CSS 技巧。

方法 #1) 删除不需要的边框

这是我想到的第一种方法。 在所有地方添加边框，然后删除边框：

1. 第一行中每个单元格的顶部
2. 最后一行中每个单元格的底部
3. 每行第一个单元格的左侧
4. 每行最后一个单元格的右侧

table {
  border-collapse: collapse;
}
table td {
  border: 5px solid black; 
}
table tr:first-child td {
  border-top: 0;
}
table tr td:first-child {
  border-left: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:last-child {
  border-right: 0;
}

方法 #2) rules 属性

不建议使用此方法，因为它是一个已弃用的属性。 但是，rules 属性就是专门用来做这个的。

您可以使用border-color 控制颜色，但不能控制border-width 或 border-style。

方法 #3) 使用 border-style: hidden;

这对我来说感觉像个 CSS 技巧。

table {
  border-collapse: collapse;
  border-style: hidden;
}
table td {
  border: 5px solid black;
}

MDN 有一个解释

在表格单元格和边框合并的情况下，hidden 值具有最高优先级：这意味着如果设置了任何其他冲突的边框，它将不会显示。

通过在表格本身中添加border-style: hidden;，这意味着“hidden”在外部边缘获胜，但仅在外部边缘获胜，而不是内部单元格上的任何其他边框。

方法 #4: 使用 outline 属性

Carter Li 写了关于这个的 然后挑战我

也许某些东西 像 Chris 几年前制作的这个井字格游戏板 可以从 outline 中获益，而不是诉诸单独制作的单元格边框。 接受挑战，Coyier 先生？😉

必须接受那个挑战！ 看起来，由于outline-offset，这可以做到！

table {
  outline: 2px solid white;
  outline-offset: -2px;
}
table td {
  outline: 2px solid black;
}

方法 #5: 渐变

奖励！ Temani Afif 想出了用一个圆锥形渐变来实现它的方法。 它让我头脑发热，所以我不会尝试解释它。

---

你能想到其他方法吗？