StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.6" rel="nofollow noreferrer"><code>option</code> element</a> content is taken as plain text (no tags are recognized), so there is no direct way to do it. As a clumsy workaround, you can hand-format the options using a monospace font and use no-break spaces:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code> <style> select, option { font-family: Consolas, monospace; } </style> <select> <option>option 1 0.5 <option>option 2 1.5 <option>one more option 110.5 </select></code></pre> </div> </div> </p> <p>(where the spaces inside the <code>option</code> elements are no-break spaces; use <code>&nbsp;</code> for them if you don’t know how to type no-break spaces in your authoring environment).</p> <p>A completely different workaround, or approach, is the replace the <code>select</code> element by a set of checkboxes (or, depending on desired logic, radio buttons) and associated labels. You can then represent this data in a table and set suitable formatting on it:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code> <table> <tr><td><input type=checkbox> <td>option 1 <td align=right>0.5 <tr><td><input type=checkbox> <td>option 2<td align=right>1.5 <tr><td><input type=checkbox> <td>one more option <td align=right>110.5 </table></code></pre> </div> </div> </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload