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>

Answer 3

将此添加到您的样式

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

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

Answer 4

在这里检查：

Add border-bottom to table row <tr>

元素不是定义边框的最佳位置。您应该在其中定义或元素的边框。

因此，给您的tr元素一个类：

<tr class="myClass">

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

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

如果您对连续行不满意，请确保将表格上的单元格间距设置为0：

<table cellspacing="0">

干杯！

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

4 个答案: