将SELECT宽度限制为父TH的宽度

Question

我生成过滤器SELECT和INPUT到我的数据表的页脚TH。我希望这些项目的宽度与父TH的宽度相匹配（减去一些余量）。

我的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); 
  });   
}

我使用以下CSS来表示TH：

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

选择：

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

在铬中它完美地运作：

但是在Firefox中，SELECTs的大小无效：

我在chrome和firefox中打印了TH和SELECT的宽度，以下是第二列中铬的结果：

在Firefox中：

你能告诉我我做错了什么，或建议更好的解决方案吗？

Answer 1

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

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

解决方案小提琴：jsfiddle.net/vfNRS/1

Answer 2

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

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

解决方案在这里：http://jsfiddle.net/gZEc9/12/