I am having some issues with a particular HTML snippet that I have included below:
<table>
<tbody>
<tr>
<td><table>...</table></td>
<td><table>...</table></td>
<td><table>...</table></td>
...
<td><table>...</table></td>
</tr>
</tbody>
</table>
This snippet is causing an issue as demonstrated in this jsFiddle. There seems to be an unwanted space between every td in the first level of the table, resulting in the first level table being wider than the sum of the widths of the second level tables. The alert popup in the fiddle showcases this problem.
How can I rectify this issue to ensure that all the tables have the same width?
Additionally, I would greatly appreciate an explanation along with the solution.