Question

I browsed some other questions, but couldn’t find something that fixes my issue.

I created a code snippet here:
http://jsfiddle.net/manoj382/3SeB7/embedded/result/

I have a table with one row and six cells. The width of each td/cell is defined and it matches the width of the image inside of it (the width of each image is defined, too). Everything works fine, but when I zoom in or out in the browser, white gaps appear somewhat sporadically.

I tried removing white space in the code, I defined the width and height, the images are set to display:block, the total width of each cell/image matches the total width of the entire table, which is also defined. The client is being picky about the gaps when zooming, though, and I’m out of ideas.

*This is for an HTML newsletter, which is why I’m using the old school table layout method.

<table width="600" cellpadding="0" cellspacing="0" border="0">
    <tbody>
        <tr>
            <td width="31">
                <img src="http://placekitten.com/g/31/64" style="width:31px; height:64px;">
            </td>

            <td width="65">
                <img src="http://placekitten.com/g/65/64" style="width:65px; height:64px;">
            </td>

            <td width="411">
                <img src="http://placekitten.com/g/411/64" style="width:411px; height:64px;">
            </td>

            <td width="64">
                <img src="http://placekitten.com/g/64/64" style="width:64px; height:64px;">
            </td>

            <td width="29">
                <img src="http://placekitten.com/g/29/64" style="width:29px; height:64px;">
            </td>

        </tr>
    </tbody>
</table>

The relevant css:

<style type="text/css">
    img {display:block !important;}
</style>

Answer 1

While zooming in/out, the browser has to round the box widths to integers. You cannot assume that things will always be properly aligned.

One solution could be to use float: left boxes instead of table cells so that the boxes are always guaranteed to be flush against each other.

Another solution could be to use background images instead of <img> tags as @user1760422 mentioned in a comment above. You could make the images slightly wider than the cells or just allow background-repeat: repeat-x to show a patch of pixels instead of a white strip between the images.