Strange Chrome Issue Table Border Top - html

Question

I have spotted a strange issue with chrome when rendering table borders. I have four columns and I want the third column to have no borders. In Firefox it displays correctly, so that it looks like the first and second columns are a separate table from the fourth column, as you can see here:
However, in Chrome, the top border of the first columns extends right across all the other columns as you can see here:
This is what the html code is for this:
<tr style="border: none;">
<td style="width: 120px;">Surname</td>
<td style="width: 300px;">Bloggs</td>
<td style="border: none; width: 10px;"> </td>
<td rowspan="3" style="width: 100px;"><div class="studentimg" style="background-image:url('<%=strStudentPhoto%>');"></div></td>
</tr>
I know it is the first column that is cause the issue because I change the code to this:
<tr style="border: none;">
<td style="width: 120px;">Surname</td>
<td style="border-top: none; width: 300px;">Bloggs</td>
<td style="border: none; width: 10px;"> </td>
<td rowspan="3" style="border-top: none; width: 100px;"><div class="studentimg" style="background-image:url('<%=strStudentPhoto%>');"></div></td>
</tr>
and in Chrome it still shows as above, whereas in Firefox it now shows as only the first column have a top border, like this?
Anyone have any ideas how to fix this for Chrome?
Thanks
David

Answer 1

The following code (based on yours) does not show the problem you described in Chrome.
Note: I removed a lot of the inline styles, i removed the inline border from the trs, I applied rowspan="3" to the third cell in the first row and omitted the third cell in the following rows. For the rest of the settings see yourself in the snippet below:
table {
border-collapse: collapse;
}
td {
border: 1px solid #777;
}
<table>
<tr>
<td style="width: 120px;">Surname</td>
<td style="width: 300px;">Bloggs</td>
<td rowspan="3" style="border: none; width: 10px;"> </td>
<td rowspan="3" style="width: 100px;">
<div style="width:100px;height:100px;background:url(https://placehold.it/67x100/fc5) center center no-repeat;background-size:contain;"></div>
</td>
</tr>
<tr>
<td>Surname</td>
<td>Bloggs</td>
</tr>
<tr>
<td>Surname</td>
<td>Bloggs</td>
</tr>
</table>