css issue while using multi select and scroll feature in datatables

css issue while using multi select and scroll feature in datatables

I am using datatable's multi select feature and scrollX and scrollY with
various other features as well. But the features particularly multiselect
and sScrollX, sScrollY seems to conflict eachother.



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



While using multifilter with scroll feature, the width of multiselect
textbox seem to shift right. With more than 40 columns, the UI gets worse.
multiselect with scrollY
http://postimg.org/image/palnmlfnb/



I dig into the rendered html with firebug and found that,
1. In multiselect only, there are no styles for width
<tfoot>
<tr>
<th rowspan="1" colspan="1">
<span class="filter_column filter_text">
2. But after using scroll X and Y feature i.e. ( sScrollX, sScrollY),
styles appears
<tr>
<th rowspan="1" colspan="1" style="width: 17px;">
<span class="filter_column filter_text">
And the culprit here seems to be the style="width: XXpx;" which is being
rendred by the javascript, for each 'th'
element.style {
width: XXpx;
}
Note: XX above refers to two digit number, e.g 14
I even tried to use css feature overflow:auto; for the entire table which
works perfectly but now the scroll bar is for the entire table. But I also
have another features like tableTools and Colvis feature at the top which
comes under vertical scroll bar as well. So this was not a solution.
Please shed some light my friends.