html - 如何在第一行下方绘制水平分隔线？

Question

我有一个这样的表:

+------+------+
| col1 | col2 | // row1
| col1 | col2 | // row2
| col1 | col2 | // row3
+------+------+

现在我想在 row1 下画一条线。我可以用这种方式选择它:

tr:nth-child(1){ // selecting first row }

或者这样:

tr:first-child { // selecting first row }

但我不知道为什么 border-bottom 在这种情况下不起作用。其实我想要这样的东西:

+------+------+
| col1 | col2 | // row1
+------+------+
| col1 | col2 | // row2
| col1 | col2 | // row3
+------+------+ 

需要注意的是，其他属性也可以，像这样:

tr:first-child {
    color: red;                  // the color will be red
    border-bottom: 1px solid;    // it does not work
}

那么，我该怎么做呢？

Answer 1

将以下内容添加到您的 CSS:

table  {
    border-collapse: collapse;
}

此外，您还必须为边框设置颜色:border-bottom:1px solid red;

完整的例子是这样的:

table  {
  border-collapse:collapse;
}
tr:first-child {
  color:red;                
  border-bottom:1px solid red;  
}

<table>
    <tr>
        <td>col1</td>
        <td>col2</td>
        <td>col3</td>
    </tr>
    <tr>
        <td>col1</td>
        <td>col2</td>
        <td>col3</td>
    </tr>
    <tr>
        <td>col1</td>
        <td>col2</td>
        <td>col3</td>
    </tr>
</table>