在tr标记下添加border-bottom

Question

我需要在<tr>标记下添加border-bottom。在第一个和最后一个<tr>边框下应为无。我该怎么办？

table tr {
border-bottom: 1px solid #000;
}

<table>
<thead>
    <th>id</th>
    <th>name</th>
    <th>position</th>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Peter</td>
        <td>journalist</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Alex</td>
        <td>footballer</td>
    </tr>
    <tr>
        <td>3</td>
        <td>John</td>
        <td>driver</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Adam</td>
        <td>programmer</td>
    </tr>
</tbody>

Answer 1

使用:first-child＆amp; :last-child选择器分别用于定位第一个和最后一个孩子。像：

table tr:first-child {
  border-bottom: none;
}

table tr:last-child {
  border-bottom: none;
}

请看下面的代码段：

table {
  border-collapse: collapse;
}

table tr {
  border-bottom: 1px solid #000;
}

table tr:first-child {
  border-bottom: none;
}

table tr:last-child {
  border-bottom: none;
}

<table>
  <thead>
      <th>id</th>
      <th>name</th>
      <th>position</th>
  </thead>
  <tbody>
      <tr>
          <td>1</td>
          <td>Peter</td>
          <td>journalist</td>
      </tr>
      <tr>
          <td>2</td>
          <td>Alex</td>
          <td>footballer</td>
      </tr>
      <tr>
          <td>3</td>
          <td>John</td>
          <td>driver</td>
      </tr>
      <tr>
          <td>4</td>
          <td>Adam</td>
          <td>programmer</td>
      </tr>
  </tbody>
</table>

希望这有帮助！

Answer 2

只需在代码中添加以下代码：

tr+tr {
    border-bottom: 1px solid #000;
}

Answer 3

除了之前发布的答案之外，您还可以立即定位css文件中的:first-child和:last-child，从而使代码更加清晰，无需重复：

＆＃13;

＆＃13;

table {
  border-collapse: collapse;
}

table tr {
  border-bottom: 1px solid #000;
}

table tr:first-child, tr:last-child {
  border-bottom: none;
}

＆＃13;

<table>
  <thead>
      <th>id</th>
      <th>name</th>
      <th>position</th>
  </thead>
  <tbody>
      <tr>
          <td>1</td>
          <td>Peter</td>
          <td>journalist</td>
      </tr>
      <tr>
          <td>2</td>
          <td>Alex</td>
          <td>footballer</td>
      </tr>
      <tr>
          <td>3</td>
          <td>John</td>
          <td>driver</td>
      </tr>
      <tr>
          <td>4</td>
          <td>Adam</td>
          <td>programmer</td>
      </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;