Honor Whitespace padding to display columns in fixed width <select>

Question

I am trying to create the effect of columns in a dropdown by padding text with whitespace as in this example:

<select style="font-family: courier;">
<option value="1">[Aux1+1] [*]  [Aux1+1]              [@Tn=PP] </option>
<option value="2">[Main]   [*]  [Main Apples Oranges] [@Fu=$p] </option>
<option value="3">[Main]   [*]  [Next NP]             [@Fu=n]  </option>
<option value="4">[Main]   [Dr] [Main]                [@Ty=$p] </option>
</select>

According to this blog, it's possible.

The problem is the whitespace is contracted so that the columsn don't line up. SAme results in FF, IE6 and Chrome.

What am I missing?

Answer 1

You'll need to use   instead of just normal spaces.

For example, you would do this with your option:

<option value="2">[Main]&nbsp;&nbsp;&nbsp;[*]&nbsp;&nbsp;[Main Apples Oranges]&nbsp;[@Fu=$p] </option>

Answer 2

White space in HTML is contracted by default. Use CSS to select a monospace font (like in the example you're linking to) and style the white space as preformatted.

option {
    font-family: monospace;
    white-space: pre;
}

Answer 3

Expanding on the answer by patmortech to render a ListItem in asp.net with   instead of  

//Pad the columns
string spaceDecode = Server.HtmlDecode(" ");
for (int i = 0; i < ddl.Items.Count; i++)
{
    ListItem item = ddl.Items[i];
    item.Text = item .Text.Replace(" ", spaceDecode);
}