Question

我有table，其中一半的单元格为rowspan="2"而另一半则不是td。请参阅demo。

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

使用CSS执行此操作最优雅的方法是什么？我不想在每个{{1}}上放一个类名，只是为了让这个工作......

Answer 1

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

Answer 2

仅separate your headers from the actual rows使用<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;
}

有行间存在时添加行边框的最简单方法是什么？

2 个答案: