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 other. I have tried placing a table inside the option element to see if I can force it, but it failed. I tried using nonbreaking spaces, but that failed as well (I believe because of the font-family style for the letters). Here is the code I have:

<form>
    <label>I would like to style this in a manner in which the months, years, and title are aligned with each other</label>
    <select id="news2">
        <option selected value="Click Here"></option>
        <option value="1">    JAN  2000 - Title 1     </option>
        <option value="2">    FEB  1191 - Title 2     </option>
        <option value="3">    MAR  2014 - Title 3     </option>
        <option value="4">    APR  1995 - Title 4     </option>
        <option value="5">    MAY  2034 - Title 5     </option>
        <option value="6">    JUNE 2210 - Title 6     </option>
        <option value="7">    JULY 1991 - Title 7     </option>
    </select>
</form>

I aligned the text in the code to demonstrate how I would like it lined up on the drop down. I am aware that this font is monospaced, but the font that I am using is not. I also have a fiddle http://jsfiddle.net/n83ahz5q/ As in most of my questions, I try to reduce the amount scripting, I would prefer an html/css solution if at all possible. If not, I can do native JavaScript too.

回答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;
}

<select id="news2">
  <option selected value="Click Here"></option>
  <option value="1"> JAN 2000 - Title 1 </option>
  <option value="2"> FEB 1191 - Title 2 </option>
  <option value="3"> MAR 2014 - Title 3 </option>
  <option value="4"> APR 1995 - Title 4 </option>
  <option value="5"> MAY 2034 - Title 5 </option>
  <option value="6"> JUNE 2210 - Title 6 </option>
  <option value="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><input type="radio" name="news2" value="1"></td>
    <td>JAN</td>
    <td>2000</td>
    <td>- Title 1</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="2"></td>
    <td>FEB</td>
    <td>1191</td>
    <td>- Title 2</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="3"></td>
    <td>MAR</td>
    <td>2014</td>
    <td>- Title 3</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="4"></td>
    <td>APR</td>
    <td>1995</td>
    <td>- Title 4</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="5"></td>
    <td>MAY</td>
    <td>2034</td>
    <td>- Title 5</td>
  </tr>
  <tr>
    <td><input type="radio" name="news2" value="6"></td>
    <td>JUNE</td>
    <td>2210</td>
    <td>- Title 6</td>
  </tr>
  <tr>
    <td><input type="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.