Javascript 将“选择宽度”限制为“父项宽度”

我生成过滤器选择并输入数据表的页脚TH。我希望这些项目的宽度匹配父项TH的宽度（减去一些边距）

My TH元素具有类.datainput或.dataselect，以了解应生成SELECT还是INPUT

我创建了这个脚本，在加载AJAX数据并生成输入后调用它：

function fnFixElementsTH() {

  // Fix data inputs
  $('.datainput').each(function(i) {
    var thWidth = $(this).width(); 
    $(this).children().width(thWidth); 
  }); 

  // Fix data selects
  $('.dataselect').each(function(i) {
    var thWidth = $(this).width() - 10; 
    $(this).children().width(thWidth); 
  });   
}

我对TH使用以下CSS：

padding: 3px 0px 3px 10px;
font-weight: bold;
font-weight: normal;

对于select：

word-wrap: normal;
margin-right: 10px;

在chromium中，它工作得非常完美：

但在firefox中，选择的大小无效：

我在chromium和firefox中打印了THs和SELECTs的宽度，下面是chromium中第二列的结果：

在firefox中：

您能告诉我我做错了什么，或者提出更好的解决方案吗？

问题出在.width（）Jquery API中。它与FF有一些问题。您可以使用.css设置宽度

  $(".dataselect").each(function(i) {
    var thWidth = $(this).width() - 10; 
    $(this).children().css('width',thWidth); 
  });

---

解决方案小提琴：

我找到了解决方案，必须设置select的外部宽度：

// Fix data selects
$('.dataselect').each(function(i) {
  var thWidth = $(this).width() - 10; 
  //$(this).children().width(thWidth);     THIS WAS WRONG
  $(this).children().outerWidth(thWidth);
}); 

---

解决方案在这里：

你能做一个JSFIDLE吗？这个问题很容易解决。谢谢你，这里是：在chromium中，选择很好，居中，但是在firefox中它们是向右移动的。你需要使用CSS而不是.width（）。它在FF中有一些问题。检查解决方案小提琴