在“选择下拉框”内对齐多列

Question

嘿，我一直试图找到一个3列下拉框的例子，但这样做是不可思议的。虽然我找到了2列但它们似乎没有用，因为我需要它们。

在下拉列表中，我希望它看起来像这样：

Heading1 | Heading 2     | Heading 3
something| something here| Something here again
blah blah| bleblah       | blahblahlbha
hello    | hi            | goodbye

我找到了一个有点漂亮的jquery代码，尝试在所需的位置添加空格，以便将列彼此对齐。

$.each(responce["TrainingSite"], function (key, value) {
   //Loops to populate the dropdown options
   $('#TrainingSite_1').append($('<option>', {
      value: value.RoomN,
      text: value.RoomN + ' +' + value.RoomC + ' +' + value.RoomCo
   }));
});

$("#TrainingSite_1 option").each(function () {
   var len = $(this).text().length;

   if (len > biggestLength) {
       biggestLength = len;
   }
});

var padLength = biggestLength + spacesToAdd;

$("#TrainingSite_1 option").each(function () {
   var parts = $(this).text().split('+');
   var strLength = parts[0].length;

   for (var x = 0; x < (padLength - strLength) ; x++) {
      parts[0] = parts[0] + ' ';
   }

   $(this).text(parts[0].replace(/ /g, '\u00a0') + parts[1] + parts[2]).text;
});

产生这个结果：

任何一方都有代码（MS SQL / Jquery）可以进行我需要的对齐吗？

使用JSFIDDLE示例

https://jsfiddle.net/e17Lt1mL/

Answer 1

我在这里参加聚会的时间有点晚了，但是你在正确的轨道上排列了列数据。只需在您的选择和选项元素中添加固定宽度的字体即可。我用：

select.fw，option.fw {font-family：'courier new'}