select 框下拉菜单的样式类似于 table

Question

我在我的代码中使用了一个 select 框，其中包含 50 个选项，默认情况下，当我点击它时，下拉菜单如下所示：

<select name="Select1" style="width: 56px">
 <option></option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>

但我希望它看起来像 table：

我尝试了一些 CSS 和 JS 但没有用，有什么办法吗？

Answer 1

只有一个 <select> 元素，没有 . . . HTML select 在跨浏览器样式支持方面，盒子是最有限的。即使是最 "flexible" 的浏览器也对它们允许您更改的内容有极大的限制（some 字体样式、some 颜色支持、大小和间距是你应该期望得到的最多）。

如果您必须拥有类似 table 的结构，您只能使用库或构建模仿下拉菜单的自定义界面（通常使用样式化的 div 和 "show/hide" 或"slide"动画）。这是另一个类似的 SO 线程，有许多建议可供选择：Is it possible to style a select box?

select 框下拉菜单的样式类似于 table

Style select box drop-down menu like a table

javascript

css

select

html-table

drop-down-menu