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

Question

我正在尝试在表格的第一行下放置一行，但是行不通。我遵循了w3学校指南中的表格，但没有显示如何放置线条。我试图在边框上放一个边框，但是在边框上留了一个缝隙。当我尝试在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标签样式，则需要确保border-collapse: collapse上有标签table。要仅针对第一个目标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>