在数据表标头中看不到Bootstrap multiselect下拉列表

Question

我们希望在数据表头中实现bootstrap multiselect下拉列表以过滤该数据表中的记录。但由于overflow:hidden dataTables_scrollHeadInner数据表的<div>属性，多数选择下拉列表不可见。

但是我们无法删除overflow:hidden属性，因为删除此属性时标题未对齐。任何解决方案？

代码：

oTable = this.dataTable();
$headerTable = $('div.dataTables_scrollHeadInner table[data-table-name="'+$(oTable[0]).attr('data-table-name')+'"]');
$tHead = $headerTable.children('thead');
$headerRow = $tHead.children('tr');
$filterRow = $tHead.children('tr.filter-row');
$filterRow.empty();

if ($filterRow.length === 0) {
  $tHead.append('<tr class="filter-row"></tr>');
} 

$filterRow = $tHead.children('tr.filter-row');
$headerRow.find('th').each(function () {
   if($(this).hasClass('no-show')) {
       $filterRow.append('<td class="no-show"></td>');
   } else {
       $filterRow.append('<td ></td>');
   }
}); 

$filterCell.append('<select type="search" multiple="multiple">');

var $Select = $filterCell.find('select');
var selectBoxValues=[];
var oSettings = oTable.fnSettings();
var emptyValue = null;

for(i=0;i<oSettings.fnRecordsDisplay();i++) {
  var cellValue = $(oTable.fnGetNodes(i)).find('td').eq(columnIdx).text()
  if($.inArray(cellValue,selectBoxValues)===-1 && cellValue!= '') {
    selectBoxValues.push(cellValue);
  }
  if(cellValue.trim()== '') {
     emptyValue = cellValue;
  }
} 

if(emptyValue!=null) {
  $Select.append('<option value="$">Blank Values</option>');
  $Select.append('<option value=".*\\S.*">Non-Blank Values</option>');
  $Select.append('<optgroup label="------------------------------"></optgroup>');
}

$Select.append('<option value=".*">Select All</option>');
$Select.populate(selectBoxValues);

$Select.multiselect({
  enableCaseInsensitiveFiltering: true,
  buttonWidth:'136px',
});