jquery - 在数据表中使用多重选择和滚动功能时出现CSS问题

我正在使用数据表的多选功能，并同时使用scrollX和scrollY和其他各种功能。但是功能特别是multiselect和sScrollX，sScrollY似乎彼此冲突。



仅多重选择

http://postimg.org/image/z55uqsbxd/



在使用具有滚动功能的多重过滤器时，多重选择文本框的宽度似乎向右移动。超过40列，UI变得更糟。

使用scrollY进行多选

http://postimg.org/image/palnmlfnb/



我用萤火虫深入研究了渲染的html，发现
1.仅在多选中，没有用于宽度的样式

<tfoot>
<tr>
<th rowspan="1" colspan="1">
<span class="filter_column filter_text">

2.但是在使用滚动X和Y功能（即sScrollX，sScrollY）后，会出现样式

<tr>
<th rowspan="1" colspan="1" style="width: 17px;">
<span class="filter_column filter_text">

罪魁祸首似乎是style =“ width：XXpx;”对于每个“第

element.style {
    width: XXpx;
}

注意：上面的XX是指两位数字，例如14

我什至尝试使用css功能溢出：整个表都可以正常工作，但是现在滚动条适用于整个表。但是我在顶部还有另一个功能，如tableTools和Colvis功能，它们也位于垂直滚动条的下面。因此，这不是解决方案。

请给我的朋友们一些启发。

最佳答案

我遇到了类似的问题。在标题单元格和主体单元格中如何添加水平填充存在一个错误。我正在查看我的代码，但是没有注意到我做了什么修复。尝试消除固定宽度和/或将水平填充设置为0。

更新：
回去挖这个。最后，我没有在标签上放置水平填充，然后将内容按跨度包装在标签中，然后将水平填充应用于标签。如此有效...

<th>
  <span>Column heading</span>
</th>

然后是CSS

th {
  padding: 3px 0;
}

th span {
  padding: 0px 15px;
}

然后，要生成正确的HTML，您将需要回调以包装标题。

$.fn.dataTableExt.oApi.fnColHeads = function( oSettings ) {
  return this.each( function() {
    var $this = $(this);

    $this
      .parents('.dataTables_wrapper:first')
      .find('.dataTables_scrollHead')
        .find('th.sorting_asc, th.sorting_desc, th.sorting')
          // adds the dom objects
          .each(function() {
            var $this = $(this);

            if ( $this.find('span').length < 1 ) {
              $this.wrapInner('<span />');
            }
          });
  });
});

$.extend( $.fn.dataTable.defaults, {
  "fnInitComplete": function() {
    this.fnColHeads();
  }
});

这是我自己代码的所有简化版本。让我知道它是否有效，或者您发现任何错误。