Two Row Highlight

HTML

<table align="center" id="table">
  <tr>
    <th>Vendor</th>
    <th>Model</th>
    <th>Year</th>
    <th>Source</th>
  </tr>
  <td>vendor1</td>

  <td>model1</td>

  <td>year1</td>

  <td>source1</td>

  <tr>
    <td colspan="4">description1</td>
  </tr>

  <td>vendor2</td>

  <td>model2</td>

  <td>year2</td>

  <td>source2</td>

  <tr>
    <td colspan="4">description2</td>
  </tr>

  <td>vendor3</td>

  <td>model3</td>

  <td>year3</td>

  <td>source3</td>

  <tr>
    <td colspan="4">description3</td>
  </tr>

  <td>vendor4</td>

  <td>model4</td>

  <td>year4</td>

  <td>source4</td>

  <tr>
    <td colspan="4">description4</td>
  </tr>

</table>

CSS

#table {
  border-radius: 10px;
  border-collapse: collapse;
  width: auto;
}

#table td,
#table th {
  border: 1px solid #DDDDDD;
  padding: 8px;
}

#table tr:nth-child(2n+2):hover {
  background: #3498DB;
}

#table tr:nth-child(2n+2):hover + tr {
  background: #3498DB;
}

#table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #333333;
  color: white;
}