如何在表格的第一行下面放置一行

Question

我试图在我的表的第一行下面放一条线，但它不起作用。我遵循了w3学校的表格指南，但它没有显示如何放置线条。我试着在th上加一个边框，但它在线上留下了一个空隙。当我尝试在tr上设置边框时，它不起作用。

下面是我的代码：

​

tr {
  border-style: solid;
  border-width: 2px;
  border-color: black;
}

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

​

Answer 1

表格只能通过单个单元格进行格式化。如果您尝试设置tr标签的样式，则需要确保您的table上有border-collapse: collapse。要专门针对第一个tr，请将您的说明符设置为tr:first-of-type并添加一个border-bottom: 2px solid black。

​

table {
  border-collapse: collapse;
}

tr:first-of-type {
  border-bottom: 2px solid black;
}

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

​

Answer 2

您可以尝试折叠边框表，然后将边框设置为th

​

tr th{
  border-bottom:2px solid #000;
}
table {
  border-collapse: collapse
}

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

​

Answer 3

将此代码添加到您的样式中

tr:first-child th {
    border-bottom: solid 1px black;
}

您要做的是选择表行中的"th“个单元格，如果该行是其父对象的第一个子项。然后应用指定的样式。