I am using jquery tablesorter to get a table that has filter and is scrollable.

    $(function(){
    $('.tablesorter').tablesorter({
        theme:'metro-dark',
        showProcessing: true,
        widgets: ['zebra'],
        headerTemplate : '{content} {icon}',
        widgets: [ 'columns','zebra','filter', 'stickyHeaders' ],
        widgetOptions : {
  scroller_height : 300,
  // scroll tbody to top after sorting
  scroller_upAfterSort: true,
  // pop table header into view while scrolling up the page
  scroller_jumpToHeader: true,
  // In tablesorter v2.19.0 the scroll bar width is auto-detected
  // add a value here to override the auto-detected setting
  scroller_barWidth : null
  // scroll_idPrefix was removed in v2.18.0
  // scroller_idPrefix : 's_'
}
    });
});

I have the th width set to the same as the td width, but you can see the filter row is slightly wider than the td rows. how can i fix this?