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

我将筛选器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中，SELECT的大小无效：


我在铬和Firefox中打印了TH和SELECT的宽度，这是铬的第二列的结果：



在Firefox中：



您能告诉我我做错了什么，还是建议更好的解决方案？

最佳答案

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

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

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