html - 突出显示表列组

Question

我有一列需要突出显示相邻的列。

对于以下example fiddle :

<table border="1" style="width:100%;">
  <tbody>
    <tr>
      <th>Number</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
  </tbody>
</table>

我需要在下面的几对列周围显示一个额外的边框

• 号码 和名字
• Last Name 和 Points

我该怎么做？

有什么建议吗，好心人？

Answer 1

您可以使用 :nth-child 选择器实现这一点。

tr:first-child th:nth-child(1), tr:first-child th:nth-child(2){
   border: 1px solid red;
   border-bottom: 0;
}

tr td:nth-child(1), tr td:nth-child(2){
   border-left: 1px solid red;
   border-right: 1px solid red;
}

tr:last-child td:nth-child(1), tr:last-child td:nth-child(2){
   border-bottom: 1px solid red;
}

tr:first-child th:nth-child(3), tr:first-child th:nth-child(4){
   border: 1px solid green;
   border-bottom: 0;
}

tr td:nth-child(3), tr td:nth-child(4){
   border-left: 1px solid green;
   border-right: 1px solid green;
}

tr:last-child td:nth-child(3), tr:last-child td:nth-child(4){
   border-bottom: 1px solid green;
}

<table border="1" style="width:100%;">
  <tbody>
    <tr>
      <th>Number</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
  </tbody>
</table>