如何为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;
}

工作演示

阅读评论后更新更新,试试这个

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

替代方法DEMO