3

I have a column for which I need to highlight adjacent columns.

For the below 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>

I need to show an extra border around the below pairs of columns

  • Number and First Name
  • Last Name and Points

How do I do it?

Any suggestions, kind folks?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Zameer Ansari
  • 28,977
  • 24
  • 140
  • 219

2 Answers2

1

This can be done with :nth-child

<style type="text/css" scoped>
   table td:nth-child(odd) {
       border-left:red 1px solid;
   }
   table td:nth-child(even) {
       border-right:red 1px solid;
   }
</style>

<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>
Paul
  • 102
  • 3
1

You can achieve this using :nth-child selector.

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>
Francisco Romero
  • 12,787
  • 22
  • 92
  • 167