0

そのようなテーブルを定義したとします

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 を追加できますか?

4

2 に答える 2

7

: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

于 2013-05-10T05:44:45.093 に答える