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 回答
0

演示

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>
于 2013-05-10T06:12:06.437 回答