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>

Answer 2

你可以使用thead和tbody。

＆＃13;

printf()

＆＃13;

thead th {
  border-bottom: 1px solid grey;
 }

＆＃13;

Answer 3

您可以执行特定的路径CSS定位。

＆＃13;

tr:first-child td {
    border-bottom: solid 1px red;
}

＆＃13;

<table>
    <tr>
        <td>test</td>
        <td>test</td>
    </tr>
    <tr>
        <td>test</td>
        <td>test</td>
    </tr>
    <tr>
        <td>test</td>
        <td>test</td>
    </tr>
    <tr>
        <td>test</td>
        <td>test</td>
    </tr>
</table>

＆＃13;

jsFiddle

如何在第一行下面绘制水平分隔线？

3 个答案: