How Can I Style A Select Option Like A Table?

I have a form select drop-down that I would like to format the inner text of the options. Each option has a month, year, and a title. I would like for each to be aligned with each

Solution 1:

You cannot format a select element as a table, since the content of option elements is plain text, so you cannot designate any parts there as table cells.

The best you can do in that direction is to set the font to monospace and use no-break spaces instead of normal spaces inside the option elements, for sequences of spaces that should not collapse. (Setting white-space: pre would work in theory, but not in practice: browsers ignore it for select and option elements, as they are implemented in special ways.) Example (I’m using real no-break spaces here; you might prefer  , e.g. JAN  2000):

#news2,
#news2 option {
  font-family: Consolas, monospace;
}

<selectid="news2"><optionselectedvalue="Click Here"></option><optionvalue="1"> JAN 2000 - Title 1 </option><optionvalue="2"> FEB 1191 - Title 2 </option><optionvalue="3"> MAR 2014 - Title 3 </option><optionvalue="4"> APR 1995 - Title 4 </option><optionvalue="5"> MAY 2034 - Title 5 </option><optionvalue="6"> JUNE 2210 - Title 6 </option><optionvalue="7"> JULY 1991 - Title 7 </option></select>

You don’t actually need no-break spaces in this case, if you use consistently three-digit month abbreviations (including JUN and JUL).

A very different approach, letting you use any font, is to use a set of radio buttons instead of a select element. Then you can put parts of the labels of the alternatives in table cells. (This causes problems in accessibility, since what is logically a single label has been split into several elements, so you can’t associate the label with an input element in a normal way.) Example:

<table><tr><td><inputtype="radio"name="news2"value="1"></td><td>JAN</td><td>2000</td><td>- Title 1</td></tr><tr><td><inputtype="radio"name="news2"value="2"></td><td>FEB</td><td>1191</td><td>- Title 2</td></tr><tr><td><inputtype="radio"name="news2"value="3"></td><td>MAR</td><td>2014</td><td>- Title 3</td></tr><tr><td><inputtype="radio"name="news2"value="4"></td><td>APR</td><td>1995</td><td>- Title 4</td></tr><tr><td><inputtype="radio"name="news2"value="5"></td><td>MAY</td><td>2034</td><td>- Title 5</td></tr><tr><td><inputtype="radio"name="news2"value="6"></td><td>JUNE</td><td>2210</td><td>- Title 6</td></tr><tr><td><inputtype="radio"name="news2"value="7"></td><td>JULY</td><td>1991</td><td>- Title 7</td></tr></table>

My jsfiddle shows both alternatives in action.

Solution 2:

It's not possible to do that. Instead you can simulate a select with an HTML table (or divs/ul), CSS and jQuery.

Solution 3:

Using a select element to style a dropdown like a table only works if you include the multiple attribute to allow for more than one selection.

<table><label>Number Selector</label><td><selectname="numbers"multiple><optionvalue="1"selected>One</option><optionvalue="2"selected>Two</option><optionvalue="3"selected>Three</option></select></td>