将<select>中的列与不同字体的标题对齐</select>

Question

我有一个从HTML <select>元素创建的“表”。该表格分为用&nbsp填充的列，以使列对齐。还有一个标题，它也被填充以使它们与列对齐。

问题是当标题和“表格”内容使用不同的字体时，例如标题是日文并且表格内容是英文时。由于日语字体较宽，因此标题列和内容列不再匹配。见附图：

有没有办法让列与标题正确对齐？

作为进一步的限制，我不能只添加或删除&nbsp，因为网页的语言不是静态的，但可以在会话中更改。

编辑：这当然不是这种表所在的唯一页面。 至少中有15个。

Answer 1

虽然您只能通过 调整选择选项中的列，但您的标题中没有此限制。您可以通过CSS在列表中定位列或使用表格，如下所示：

<table style="font-family: sans-serif; font-size: 12pt;" cellspacing="0" cellpadding="2" width="450"><tr>
<th align="left" width="26%">User</th>
<th align="left" width="51%">Name</th>
<th align="left">Bar</th>
</tr></table>
<select style="font-family: monospace; font-size: 12pt;">
<option>root&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Administrator&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bar&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
</select>