Html 存在行间距时添加行边框的最简单方法？

我有一个

表

，其中一半单元格是

行span=“2”

，另一半不是。看

我希望在每一行之间有一个边界。这意味着对于H1和H2，它需要在每一行上。但对于H3和H4，它需要位于每一行上

---

使用CSS最优雅的方式是什么？我宁愿不必在每个

td

上都加一个类名就可以让它正常工作……

从您自己的小提琴开始，只需将

（偶数）

选择器设置为

（奇数）

。由于表格和单元格上的边框宽度不同，底部的结果边框并不一致，但这也很容易纠正。

仅使用

和

。然后仅设置

行的样式。当然，您仍然可以设置标题的样式，但是将表格标题与内容分开是一个很好的标记

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

H1
氢
H3
H4
1.
2.
3a
4a
...
/*有关风格：*/
t车身tr:n个孩子（偶数）{
边框底部：2倍实心#BBB；
}

嘿，谢谢，我的实际代码使用了thead和tbody。事实上，小提琴和我的实际代码之间存在一些差异，因为我得到的结果不同。今晚晚些时候我会回到这里。嗯，样式在那里（我在控制台的行上看到它们），但我没有看到边框。如果我使用

奇数

，我只能在右侧的行上看到边框。这就像无论我做什么，带有

rowspan=“2”

的行都没有边框。（这是我真正的代码，不是小提琴。据我所知，它们是一样的，但我会继续寻找）。我认为这与

边框塌陷有关。当我将其设置为
折叠
时，行边框会出现，但表右边框的大部分会消失。我添加了另一个样式，在每行的最后一个td上手动放置一个右边框，现在看起来很好。我不知道wtf正在进行，但无论如何，它现在以一种非常复杂的方式工作。