>>>>I updated the fiddle and you can see now that the header and footer are not aligned although the columns seem to be aligned regardless on content. In my case I have more columns and all seems to be not aligned properly.
>>>>
>>>>http://jsfiddle.net/5KJka/881/
>>>
>>>It's because the scroll bar reduces the width of tbody. One possible solution: http://jsfiddle.net/hashem/CrSpu/555/
>>
>>Nice, but what about the footer? I tried myself, but I am not good at it
>>
>>http://jsfiddle.net/CrSpu/2729/
>
>Add the footer in the same way as previously and repeat as for the thead:

$table.find('tfoot tr').children().each(function(i, v) {
>        $(v).width(colWidth[i]);
>    });

Ok, after I also did some modifications in the css (same for footer as for the thead) I almost got the correct behavior in that fiddle expect for the fact that now colspan is ignored:

http://jsfiddle.net/CrSpu/2736/