Non-breaking non-space in HTML

I have a bowling web application that allows pretty detailed frame-by-frame information entry. One thing it allows is tracking which pins were knocked down on each ball. To display this information, I make it look like a rack of pins:

o o o o
 o o o
  o o
   o

Images are used to represent the pins. So, for the back row, I have four img tags, then a br tag. It works great... mostly. The problem is in small browsers, such as IEMobile. In this case, where there are may 10 or 11 columns in a table, and there may be a rack of pins in each column, Internet Explorer will try to shrink the column size to fit on the screen, and I end up with something like this:

o o o
  o
o o o
 o o
  o

or

o o
o o
o o
 o
o o
 o

The structure is:

<tr>
    <td>
        <!-- some whitespace -->
        <div class="..."><img .../><img .../><img .../><img .../><br/>...</div>
        <!-- some whitespace -->
    </td>
</tr>

There is no whitespace inside the inner div. If you look at this page in a regular browser, it should display fine. If you look at it in IEMobile, it does not.

Any hints or suggestions? Maybe some sort of   that doesn't actually add a space?

---

Follow-up/Summary

I have received and tried several good suggestions, including:

• Dynamically generate the whole image on the server. It is a good solution, but doesn't really fit my need (hosted on GAE), and a bit more code than I'd like to write. These images could also be cached after the first generation.
• Use CSS white-space declaration. It is a good standards-based solution, but it fails miserably in the IEMobile view.

What I ended up doing

*hangs head and mumbles something*

Yes, that's right, a transparent GIF at the top of the div, sized to the width I need. End code (simplified) looks like:

<table class="game">
    <tr class="analysis leave">
        <!-- ... -->
        <td> <div class="smallpins"><img class="spacer" src="http://seasrc.th.net/gif/cleardot.gif" /><br/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/pinsmall.gif"/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/></div> </td>
        <!-- ... -->
    </tr>
</table>

And CSS:

div.smallpins {
    background: url(/img/lane.gif) repeat;
    text-align: center;
    padding: 0;
    white-space: nowrap;
}
div.smallpins img {
    width: 1em;
    height: 1em;
}
div.smallpins img.spacer {
    width: 4.5em;
    height: 0px;
}
table.game tr.leave td{
    padding: 0;
    margin: 0;
}
table.game tr.leave .smallpins {
    min-width: 4em;
    white-space: nowrap;
    background: none;
}

P.S.: No, I will not be hotlinking someone else's clear dot in my final solution :)

You could try the css "nowrap" option in the containing div.

{white-space: nowrap;}

Not sure how widely that is supported.