CODEWITHSUNDEEP
htmlcsshtml-table
David Bradley
David Bradley

Reputation: 13

Strange Chrome Issue Table Border Top

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:

enter image description here

However, in Chrome, the top border of the first columns extends right across all the other columns as you can see here:

enter image description 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;">&nbsp;</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;">&nbsp;</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?

enter image description here

Anyone have any ideas how to fix this for Chrome?

Thanks David

Upvotes: 0

Views: 372

Answers (1)

Johannes
Johannes

Reputation: 67748

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;">&nbsp;</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>

Upvotes: 1

Related Questions