html - 如何为 html tr 添加边框

Question

假设我定义了这样一个表

1    Chailie     23  Joker   Bass
2    Chailie     23  Joker   Bass
3    Chailie     23  Joker   Bass
4    Chailie     23  Joker   Bass
5    Chailie     23  Joker   Bass
6    Chailie     23  Joker   Bass

现在我想让它看起来像这样

|----------------------------------------|
|1   Chailie     23  Joker   Bass        |
|2   Chailie     23  Joker   Bass        |
|3   Chailie     23  Joker   Bass        |
|----------------------------------------|
|4   Chailie     23  Joker   Bass        |
|5   Chailie     23  Joker   Bass        |
|6   Chailie     23  Joker   Bass        |
|----------------------------------------|

如你所见，我想为 tr 的一部分添加边框并使其看起来像被分组，有人知道如何实现吗？例如，我可以添加一些 CSS 来设置这样的边框吗？

Answer 1

尝试 :nth-child CSS 属性

tr:nth-child(3n+0) {
  background-color: lime;
}
tr:nth-child(3n+0) td {
  border-top :1px dashed blue;
}

Working DEMO

更多更新阅读您的评论后，试试这个

tr:nth-child(3n+1) td {
  border-top : 1px dashed blue;
}
td:first-child  {
  border-left : 1px dashed blue;
}
td:last-child  {
  border-right : 1px dashed blue;
}

Working DEMO

替代方式:(兼容跨浏览器)

tr:nth-child(3n+1) td {
  border-top : 1px solid grey; 
}
table {
    border-right:1px solid grey; 
    border-left: 1px solid grey; 
}

alternative method DEMO