Html 如何设置像表格一样的选择选项？

How can I style a select option like a table?

提问by kingcobra1986

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:

我有一个表单选择下拉列表，我想格式化选项的内部文本。每个选项都有一个月份、年份和一个标题。我希望每个人都保持一致。我曾尝试在 option 元素中放置一个表格，以查看是否可以强制使用它，但它失败了。我尝试使用不间断空格，但也失败了（我相信是因为字母的字体系列样式）。这是我的代码：

<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.

我对齐代码中的文本以演示我希望它如何在下拉列表中排列。我知道这种字体是等宽的，但我使用的字体不是。我也有一个小提琴http://jsfiddle.net/n83ahz5q/在我的大多数问题中，我试图减少脚本编写的数量，如果可能的话，我更喜欢 html/css 解决方案。如果没有，我也可以使用原生 JavaScript。

采纳答案by Jukka K. Korpela

You cannot format a selectelement as a table, since the content of optionelements is plain text, so you cannot designate any parts there as table cells.

您不能将select元素格式化为表格，因为option元素的内容是纯文本，因此您不能将其中的任何部分指定为表格单元格。

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 optionelements, for sequences of spaces that should not collapse. (Setting white-space: prewould work in theory, but not in practice: browsers ignore it for selectand optionelements, as they are implemented in special ways.) Example (I'm using real no-break spaces here; you might prefer  , e.g. JAN  2000):

在这个方向上你能做的最好的事情是将字体设置为等宽，并在option元素内使用不间断空格而不是正常空格，用于不应折叠的空格序列。（设置white-space: pre在理论上可行，但在实践中无效：浏览器忽略它 forselect和option元素，因为它们以特殊方式实现。）示例（我在这里使用真正的不间断空格；您可能更喜欢 ，例如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).

在这种情况下，如果您始终使用三位数的月份缩写（包括 JUN 和 JUL），则您实际上不需要不间断空格。

A very different approach, letting you use any font, is to use a set of radio buttons instead of a selectelement. 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 inputelement in a normal way.) Example:

一种让您使用任何字体的非常不同的方法是使用一组单选按钮而不是select元素。然后您可以将部分选项的标签放在表格单元格中。（这会导致可访问性问题，因为逻辑上单个标签已被拆分为多个元素，因此您无法input以正常方式将标签与元素相关联。）示例：

<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 jsfiddleshows both alternatives in action.

我的jsfiddle显示了两种替代方案。

回答by jmdeamer

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.

使用 select 元素将下拉列表设置为表格样式，仅当您包含 multiple 属性以允许多个选择时才有效。

<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>

回答by Oscar Fanelli

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

这是不可能的。相反，您可以使用 HTML table（或divs/ ul）、CSS 和 jQuery模拟选择。