CSS border-width 颠簸

Question

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

我有一个 12 行 x 3 列的 table，它有一个 header 行和两个“标签列”，使其成为 13 行 x 5 列 table一共

看起来像这样：

我希望所有边框都为 1px，但我想通过使边框为 3x 来突出显示 12 个 3x1“框”。我已经用红色显示了那些“框”的边框以更好地说明它们的位置，但我希望它们是黑色边框。我还想将 table 的外边框设为 3px，也许运行的水平边框设为 table.

的全宽

我一直在尝试使用 :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;
}

我的计划是

3n+2 个元素重除了底部，
左边和右边重的3n+3个元素，
除顶部外的 3n+4 个元素都很重

现在，none 的边框是 3px :-(，但是昨晚，正确的水平边框是 3px，但只有垂直边框3px 分别是最左边和最右边。

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

你能否用后续作业覆盖之前的 border-width 作业？

提前致谢。

Answer 1

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

它的作用：

它在 td 而不是 tr 上运行
它将 table header 与 body 分开。
它适应这样一个事实，即有时 (rowspan=3) td 可能是第一个元素，否则不是

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

CSS border-width 颠簸

CSS border-width thrashing

css

html-table

highlight