title: How can I style a select option like a table?
body: <p>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:</p>
  
  <pre><code>&lt;form&gt;
      &lt;label&gt;I would like to style this in a manner in which the months, years, and title are aligned with each other&lt;/label&gt;
      &lt;select id="news2"&gt;
          &lt;option selected value="Click Here"&gt;&lt;/option&gt;
          &lt;option value="1"&gt;    JAN  2000 - Title 1     &lt;/option&gt;
          &lt;option value="2"&gt;    FEB  1191 - Title 2     &lt;/option&gt;
          &lt;option value="3"&gt;    MAR  2014 - Title 3     &lt;/option&gt;
          &lt;option value="4"&gt;    APR  1995 - Title 4     &lt;/option&gt;
          &lt;option value="5"&gt;    MAY  2034 - Title 5     &lt;/option&gt;
          &lt;option value="6"&gt;    JUNE 2210 - Title 6     &lt;/option&gt;
          &lt;option value="7"&gt;    JULY 1991 - Title 7     &lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>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 <a href="http://jsfiddle.net/n83ahz5q/" rel="nofollow noreferrer">http://jsfiddle.net/n83ahz5q/</a> 
  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.</p>