如何在表格的第一行下放一行答案

【问题标题】：how to put a line under first row in table如何在表格的第一行下放一行
【发布时间】：2019-09-01 12:55:29
【问题描述】：

我正在尝试在表格的第一行下方添加一条线，但它不起作用。我遵循了 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>

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

将此添加到您的样式中

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

如果该行是其父行的第一个子行，则您正在做的是选择表格行中的“第”个单元格。然后您将应用指定的样式。

【讨论】：

【解决方案4】：

在这里查看：

Add border-bottom to table row <tr>

元素不是定义边框的最佳位置。您应该在里面定义 or 元素的边框。

所以，给你的 tr 元素一个类：

<tr class="myClass">

然后像这样在 CSS 中定义它：

tr.myClass td, tr.myClass th {
    border-bottom: 1px solid black;
}

如果您对线条不连续感到恼火，请确保将表格上的单元格间距设置为 0：

<table cellspacing="0">

干杯！

【讨论】：