Datatables 使用列筛选时，JQuery数据表重叠

我在bootstrap div中有一个Jquery数据表。bootstrap行分为Datatable和Chartjs图表

在没有任何选项的情况下初始化DataTable时，布局保持良好，没有任何重叠。但是，当我添加以下用于添加列过滤选项的代码时，布局被破坏了

$('#example').DataTable( {
 initComplete: function () {
   this.api().columns().every( function () {
    var column = this;
    var select = $('<select><option value=""></option></select>')
    .appendTo( $(column.footer()).empty() )
    .on( 'change', function () {
     var val = $.fn.dataTable.util.escapeRegex(
      $(this).val()
     );
column
  .search( val ? '^'+val+'$' : '', true, false )
  .draw();
  } );
column.data().unique().sort().each( function ( d, j ) {
  select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );

$（'#示例'）。数据表（{
initComplete:函数（）{
this.api（）.columns（）.every（函数（）{
var列=此；
变量选择=$（“”）
.appendTo（$（column.footer（））.empty（））
.on（'change'，function（）{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（）
);
柱
.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
} );
column.data（）.unique（）.sort（）.each（函数（d，j）{
选择。追加（“”+d+“”）
} );
} );
}
} );

我注意到最下面的代码是导致问题的代码。我该如何解决这个问题

---

jsiddle

您的表比它所占用的引导列宽，并溢出到图形列

你也可以

使表具有响应性，以便它只占用列空间。看

或者，只需将

overflow:scroll

style添加到包含该表的列中即可

---

嗨，我的朋友。你能解释一下布局有问题吗？@Tomato32请点击JSFiddle链接。图表在表格顶部流动。没有什么错，没有在表格顶部流动table@DavidJawHpan：是的。我看不出此UI有任何问题：））