student student - 6 months ago 15
CSS Question

Highlight groups of table columns

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?

Answer

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>