There is a peculiar issue when using a table with bordered cells in FireFox. The left table border disappears when the table is placed in a wrapper with overflow-x: auto
.
<div style="overflow-x:auto">
<table style="border-collapse:collapse">
<tr>
<td style="border: none;"></td>
</tr>
<tr>
<td style="border: 1px solid black;">a</td>
</tr>
</table>
</div>
(view example here)
<div style="overflow-x:auto; padding-left: 1px">
<table style="border-collapse:collapse">
<tr>
<td style="border: none;"></td>
</tr>
<tr>
<td style="border: 1px solid black;">a</td>
</tr>
</table>
</div>
This issue persists across multiple versions of FireFox (from 4 to 56). Strangely, it does not occur on other browsers like IE, Opera, Safari, Android Browser, or Chrome. I could not find any relevant bug reports for this specific situation.
Should I report this as a bug, or am I missing something in the HTML5 spec that explains this behavior?