Once again, tables have defeated me.
I am struggling with a simple table:
<table style="width: 200px; margin: 20px auto; border-collapse: collapse; border-spacing: 0; border: none;">
<tr style="margin: 0; padding: 0; border: none; border-collapse: collapse;">
<td style="margin: 0; padding: 0; border: none; border-collapse: collapse;">
<img src="http://breadedcat.com/wp-content/uploads/2012/02/cat-breading-tutorial-004.jpg" alt="" style="width: 100%;">
</td>
</tr>
<tr style="background-color: grey; margin: 0; padding: 0; border: none; border-collapse: collapse;">
<td style="margin: 0; padding: 0; border: none; border-collapse: collapse;">Hehehehehehe</td>
</tr>
</table>
Fiddle: http://jsfiddle.net/ohys4x2o/
Despite adding styles like border: none; padding: 0;, there is still an unwanted space between the row containing the cat image and the gray row with "Hehehe" text.
I'm in desperate need of help from table experts. Please lend your expertise. Those pesky tables are driving me crazy...