table合併行hover問題

如圖：合併過後的單元格，hover時如何顯示背景色？

Css: 
body {
  padding: 1em;
}


table {
  width: 100%;
  border-collapse: collapse;
}


td, th {
  padding: .25em;
  border: 1px solid black;
}


tbody:nth-child(odd) {
  background: #CCC;
}

tbody:hover td[rowspan], tr:hover td {
   background: red; 
}


Html:
<table>
<tbody>
<tr>
<td ></td>
<td>a</td>
<td rowspan="3"></td>
</tr>
<tr>
      <td></td>
<td>b</td>
</tr>
<tr>
      <td></td>
<td>c</td>
</tr>
</tbody>

<tbody>
<tr>
<td rowspan="3"></td>
<td>1</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
</tr>
</tbody>
</table>