How can I choose a selection option like a table?
I have a form select dropdown that I would like to format the parameters' inner text. Each option has a month, year, and title. I would like everyone to be aligned with each other. I tried to put the table inside an option element to see if I could force it, but that failed. I tried using non-breaking spaces, but that also failed (I think due to the font style for the letter family). 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 have aligned the text in the code to demonstrate how I would like it to be lined up in the dropdown. I know this font is monospaced, but I am not using the font. I also have a fiddle http://jsfiddle.net/n83ahz5q/ As with most of my questions, I try to reduce the number of scripts, I would prefer a html / css solution if at all possible. If not, I can do native JavaScript too.
source to share
You cannot format an element select
as a table, since the contents of the elements option
are plain text, so you cannot mark any parts there as table cells.
The best you can do in this direction is to set a monospaced font and use non-whitespace spaces instead of normal spaces within elements option
for sequences of spaces that should not be collapsed. (The setup white-space: pre
will work in theory, but not in practice: browsers ignore it for elements select
and option
, since they are implemented in a special way.) Example (I'm using real whitespace here without breaks; you might prefer
for example 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>
In this case, you don't need no-break spaces if you consistently use 3-digit month abbreviations (including JUN and JUL).
A very different approach, allowing you to use any font, is to use a set of radio buttons instead of an element select
. Then you can put parts of the labels of the alternatives in the table cells. (This causes accessibility issues because what is logically a single label has been split across multiple elements, so you cannot associate a label with an element in the input
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.
source to share