html - 当存在行跨度时添加行边框的最简单方法是什么？

Question

我有一个table，其中一半的细胞是rowspan="2"，另一半不是。请参阅演示。

我想要每个“实际”行之间的边界。这意味着对于 H1 和 H2，它需要在每一行上。但是对于 H3 和 H4，它需要在每隔一行上。

使用 CSS 最优雅的方法是什么？我宁愿不必在每个人身上都加上一个类名来让它td工作......

Answer 1

从您自己的小提琴开始，只需将选择器更改为. 由于表格和单元格的边框宽度不同，底部生成的边框不统一，但这也很容易纠正。(even)(odd)

Answer 2

只需使用and将标题与实际行分开即可。然后只对行进行样式设置。当然，您仍然可以设置标题的样式，但是将表格标题与内容分开是很好的标记。<thead><tbody><tbody>

<table>
    <thead>
        <tr>
            <th>H1</th>  
            <th>H2</th> 
            <th>H3</th> 
            <th>H4</th>  
        </tr>        
    </thead>
    <tbody>
        <tr>
          <td rowspan="2">1</td>
          <td rowspan="2">2</td>
          <td>3a</td>
          <td>4a</td>
        </tr>
        ...

/* Style in question: */
tbody tr:nth-child(even) {
    border-bottom: 2px solid #BBB;
}