Dotted table borders abutting and overlapping in IE6/7

Question

I have some <td> elements with dotted 1px borders on the bottom. Each element is fixed width. This means that sometimes the borders end up like this, with abutting dots that make a dark spot in the border:

-- -- -- --|-- -- -- --

but other times they render correctly, like this:

-- -- -- --| -- -- --

I can move them around by changing the width of the <td>s a bit, and sometimes they disappear altogether, but is there a more correct way of rendering fixed-width <td>s that would avoid this problem and save me the hassle this has caused?

EDIT: Border-collapse is applied to the table

Answer 1

The problem would be in the IE renderer. I don't think there's a standardized (or even IE-specific) way of telling the renderer "start your border rendering with this offset" or whatever.

Answer 2

You could play with CSS background-images to create the dotted border. If you created a 2px wide image with a dot as the first pixel and blank as the second, you could then prevent this by making sure all your <td> widths were a multiple of 2.