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

Answer 2

DEMO

CSS：

table{
  border-collapse: collapse;
  border: 1px solid #000;
}

.three{
    border-bottom: 1px dashed #000;
}

HTML：

<table>
    <tr>
        <td>1</td>
        <td>Chailie</td>
        <td>23</td>
        <td>Joker</td>
        <td>Bass</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Chailie</td>
        <td>23</td>
        <td>Joker</td>
        <td>Bass</td>
    </tr>
    <tr class="three">
        <td>1</td>
        <td>Chailie</td>
        <td>23</td>
        <td>Joker</td>
        <td>Bass</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Chailie</td>
        <td>23</td>
        <td>Joker</td>
        <td>Bass</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Chailie</td>
        <td>23</td>
        <td>Joker</td>
        <td>Bass</td>
    </tr>
    <tr class="three">
        <td>1</td>
        <td>Chailie</td>
        <td>23</td>
        <td>Joker</td>
        <td>Bass</td>
    </tr>
</table>

如何为html tr添加边框

2 个答案: