How can I style a select option like a table?

Question

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.

score 5 · Accepted Answer · edited May 22 '19 at 08:37

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.

@korpela I am trying to implement same thing but i want different columns with some fixed width.. I dont want to use any space... Is there any way to do so .. — Aakriti.G, Dec 11 '17 at 06:57
I mix it whit PHP code and then could do the trick of alignment ;) — denn0n, Aug 25 '23 at 20:44

score 0 · Answer 2 · edited Sep 16 '14 at 23:20

0

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

edited Sep 16 '14 at 23:20

ROMANIA_engineer

54,432
29
203
199

answered Sep 16 '14 at 23:08

Oscar Fanelli

3,337
2
28
40

score 0 · Answer 3 · answered Mar 19 '20 at 05:51

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>
  <select name="numbers" multiple>
    <option value="1" selected>One</option>
    <option value="2" selected>Two</option>
    <option value="3" selected>Three</option>
  </select>
</td>

score 0 · Answer 4 · answered Sep 11 '22 at 13:48

If you are willing to use bootstrap-select you may accomplish something slightly similar to table view (that is if your aim is to make the dropdown more readable) using the data-content or data-subtext attribute

You can find a pretty example here: https://developer.snapappointments.com/bootstrap-select/examples/#styling

How can I style a select option like a table?

4 Answers4

Linked