Let me illustrate my issue with a specific example where I am utilizing a single column with a rowspan:
<table border="1" style="width:300px">
<tr>
<td rowspan="2">Family</td>
<td id="jill">Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td id="eve">Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Upon adding the following CSS:
border-left: 1px solid red;
To #jill, both rows receive a red border: http://jsfiddle.net/hPBds/16/
However, when I apply this CSS to #eve, it behaves as expected with only one border receiving the color change: http://jsfiddle.net/hPBds/17/
If anyone can explain why this is happening and provide a solution, I would greatly appreciate it. Thank you.