CSS边框宽度抖动

Question

我一直在疯狂地挣扎——实际上是几天——试图用更粗的边框突出我桌子的某些部分。

我有一个 12 行 x 3 列的表，它有一个标题行和两个“标签列”，使其完全是一个 13 行 x 5 列的表。

看起来像这样：

我希望所有边框都为 1px，但我想通过将它们的边框设置为 3x 来突出显示 12 个 3x1“框”。我已经用红色显示了这些“框”的边框，以更好地说明它们的位置，但我希望它们是黑色边框。我还想让表格的外部边框为 3px，并且可能是整个表格宽度的水平边框。

我一直在尝试使用 :nth-child(3n+m) 选择器来实现这一点：

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 2px;
}
tr: nth-child(3n+2) {
  border-style: solid;
  border-width: 3px 3px 1px 3px;
}
tr: nth-child(3n+3) {
  border-style: solid;
  border-width: 1px 3px 1px 3px;
}
tr: nth-child(3n+4) {
  border-style: solid;
  border-width: 1px 3px 3px 3px;
}

我的计划是做

1. 3n+2 元素重，除了底部，
2. 3n+3 个元素重在左右，并且
3. 3n+4 元素重，除了顶部

现在，没有的边框变成了 3px :-(，但是昨晚，正确的水平边框变成了 3px，但唯一的 3px 的垂直边框是最左边和最远对。

我想我也许可以做一些列元素并获得垂直边框，但我需要爬行才能走到这里。

你可以用后续的分配覆盖之前的边框宽度分配吗？

提前谢谢你。

Answer 1

我在这里创建了一个小提琴https://jsfiddle.net/a7o6uw0f/

它的作用：

• 它在 td 而不是 tr 上运行
• 它将表格标题与正文分开。
• 它适应了这样一个事实，即有时 (rowspan=3) td 可能是第一个元素，否则不是

取消注释 border-color 部分以查看颜色在各个单元格边框上的作用。