Как сделать TimeLine с подсветкой?

header { 
  padding: 1em; 
  width: 100%; 
  background: rgb(102,102,102); 
  position: fixed; 
} 
 
select { 
  border: 1px solid rgba(0,0,0,0.2); 
  background: rgba(0,0,0,0.1); 
  color: rgb(255,255,255); 
  padding: .5em 3.5em .5em 1em; 
  -webkit-border-radius: .3em; 
  -moz-border-radius: .3em; 
  border-radius: .3em; 
} 
 
table { 
  position: absolute; 
  width: 98%; 
  padding: .1em; 
  margin-top: 4em; 
  z-index: -1; 
} 
 
th { 
  padding: .5em; 
  background: rgba(206,206,206,0.9); 
} 
 
td { 
  width: 100%; 
  padding: 20em 2em; 
  background: rgba(206,206,206,0.3); 
}

<header> 
  <select> 
    <option>Лето</option> 
    <option>Осень</option> 
    <option>Зима</option> 
    <option>Весна</option> 
  </select> 
</header> 
<table><tr> 
    <th>Лето</th> 
  </tr> 
  <tr> 
    <td>Июнь</td> 
  </tr> 
  <tr> 
    <td>Июль</td> 
  </tr> 
  <tr> 
    <td>Август</td> 
  </tr> 
  <tr> 
    <th>Осень</th> 
  </tr> 
  <tr> 
    <td>Сентябрь</td> 
  </tr> 
  <tr> 
    <td>Октябрь</td> 
  </tr> 
  <tr> 
    <td>Ноябрь</td> 
  </tr> 
  <tr> 
    <th>Зима</th> 
  </tr> 
  <tr> 
    <td>Декабрь</td> 
  </tr> 
  <tr> 
    <td>Январь</td> 
  </tr> 
  <tr> 
    <td>Февраль</td> 
  </tr> 
  <tr> 
    <th>Весна</th> 
  </tr> 
  <tr> 
    <td>Март</td> 
  </tr> 
  <tr> 
    <td>Апрель</td> 
  </tr> 
  <tr> 
    <td>Май</td> 
  </tr></table>