Menu
So I stumbled onto something that seems strange to me.
For example, the following code:
<html>
<table style="border-collapse:collapse;">
<tr>
<td align="center" colspan="8" style="border:3px solid black;">Title</td>
</tr>
<tr>
<td style="border:2px solid black; width:175px">Destination</td>
<td style="border:2px solid black;" colspan="2">STR</td>
<td></td>
<td style="border:2px solid black;" colspan="2">Order Date</td>
<td style="border:2px solid black;" colspan="2">24/jan/14</td>
</tr>
<tr>
<td style="border:2px solid black;">SV Truck nr</td>
<td style="border:2px solid black;" colspan="2">SV92566T/24JAN</td>
<td></td>
<td style="border:2px solid black;" colspan="2">Order time</td>
<td style="border:2px solid black;" colspan="2">18HO</td>
</tr>
<tr style="height:20px">
<td colspan="8" style="border:0"></td>
</tr>
</table>
</html>
Now, I would think that this would result in a nice table structure with an empty column without borders in the middle. As long as you wouldn't include that
<tr style="height:20px">
<td colspan="8" style="border:0"></td>
</tr>
it does, in fact. So my question is why does this happen?
I'm telling the new row (which I would think has nothing to do with the previous one) that I don't want any border. But as long as I span that empty, borderless row across my 8 columns a border is added across the bottom of the previously borderless column of the previous row.
I know that I can fix this by not spanning my empty row and just leaving it as an empty <tr style="height:20px"></tr> but I would really like to just understand why this happens.
Also, I know that inline style is normally definitely not the way to go, but this is for an html company email, so I'm afraid I have no other option.
834
This solves the problem in Chrome:
<tr style="height:20px">
<td colspan="8" style="border:3px solid transparent"></td>
</tr>
Don't know why the border has to be at least 3px, but it works.
Fiddle
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
