Html 数据表组合框宽度

我正在申请 在我的HTML表上使用筛选、排序和分页。我使用以下代码将这些属性应用于表：

$(document).ready(function() {

  <!-- Sorting and pagination -->
  var oTable = $('#mainTable').dataTable( {
    "sPaginationType": "full_numbers",
    "bJQueryUI": true
  });

  <!-- Filtering -->
  $("thead td").each( function ( i ) {
    <!-- Create and populate combo boxes -->
    this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
    <!-- Filter data when selection changes -->
    $('select', this).change( function () {
      oTable.fnFilter( $(this).val(), i );
    });
  });

});

..组合框中填入表格中的数据。但是，这些框会自动调整大小，以包含值的完整长度（其中一些跨越多行），因此列的大小过大，并超出页面。我已经确定这不是CSS问题，所以我需要的是一种方法，使组合框在每个条目中使用多行，或者只显示部分值，以便我可以在一个页面上容纳所有这些列

---

提前谢谢

回答以下问题：

我更改了fnCreateSelect（组合框的构建位置）中的代码，以限制组合框中每个值存储的文本量，如下所示：

function fnCreateSelect(aData) {

    var r = '<select><option value=""></option>', i, iLen = aData.length;

    for (i = 0; i < iLen; i++) {
        // If string is a URL, handle it accordingly
        if (aData[i].indexOf("href") != -1) {
            var url = aData[i].substring(aData[i].indexOf('http'), aData[i].indexOf('">'));
            r += '<option title="' + url + '" value="' + url + '">' + url.substring(0, 25);
            if (url.length > 25)
                r += '...';
        }
        else {
            r += '<option title="' + aData[i] + '" value="' + aData[i] + '">' + aData[i].substring(0, 40)
            if (aData[i].length > 40)
                r += '...';
        }
        r += '</option>';
    }
    return r + '</select>';
}

函数fnCreateSelect（aData）{
变量r=''，i，iLen=aData.length；
对于（i=0；i”）；
r+=''+url.substring（0,25）；
如果（url.length>25）
r+='…'；
}
否则{
r+=''+aData[i].子串（0,40）
if（aData[i].长度>40）
r+='…'；
}
r+=''；
}
返回r+''；
}

function fnCreateSelect(aData) {

    var r = '<select><option value=""></option>', i, iLen = aData.length;

    for (i = 0; i < iLen; i++) {
        // If string is a URL, handle it accordingly
        if (aData[i].indexOf("href") != -1) {
            var url = aData[i].substring(aData[i].indexOf('http'), aData[i].indexOf('">'));
            r += '<option title="' + url + '" value="' + url + '">' + url.substring(0, 25);
            if (url.length > 25)
                r += '...';
        }
        else {
            r += '<option title="' + aData[i] + '" value="' + aData[i] + '">' + aData[i].substring(0, 40)
            if (aData[i].length > 40)
                r += '...';
        }
        r += '</option>';
    }
    return r + '</select>';
}