3

I have an <Option> inside a <select> on my HTML-Form.

For better visibility, I want to use a TAB inside my Option.

Now the selection is in the Dropdown displayed as:

  1. Mister Test - Technician
  2. Misses VeryLongTest - Accounting
  3. Mister X - Housekeeping

I instead want it displayed like:

1/........Mister Test........................- Technician

2/........Misses VeryLongTest.......- Accounting

545/....Mister X............................- Housekeeping

Is there any way to do this?

Jeff Schaller
  • 2,352
  • 5
  • 23
  • 38
HKK
  • 237
  • 1
  • 3
  • 17
  • 1
    ... by adding periods to your ` – summea Apr 08 '14 at 16:33
  • You would need to use javascript or PHP in order to do it dynamically, otherwise you would have to just do it by adding spaces. – 0x9BD0 Apr 08 '14 at 16:35
  • Spaces or periods are likely to result in misalignment as font character widths vary. It's not a good solution. – isherwood Apr 08 '14 at 16:35
  • @isherwood Not really. Though different styles for different parts of the option would solve the problem, it is not the same problem – Michał Apr 08 '14 at 16:47
  • @isherwood and if font widths are an issue... [monospaced fonts](http://en.wikipedia.org/wiki/Monospaced_font) could help with that... :) – summea Apr 08 '14 at 17:31

2 Answers2

6

No, you cannot do that. Content inside <option> tag is treated as plain text. It doesn't recognize any tabs nor markups. You need to use spaces unfortunately.

As it was said in question's comments it is possible to write a script for that. Unfortunately, if you cannot do it with spaces you will not be able to make a proper script. You would need a const width font like Courier new. Then you can easily write the script for that:

function alignedOptionText(spaceAvailble, beforeTab, afterTab) {
    spaces = "";
    for (var i = 0; i < beforeTab.length; ++i)
        spaces += " ";
    return beforeTab + spaces + afterTab;
}
Michał
  • 2,202
  • 2
  • 17
  • 33
0

You can implement custom select via JS. In such custom select, each option could contain any markup that could be styled as a table as you wish.

Marat Tanalin
  • 13,927
  • 1
  • 36
  • 52