How do you cause the the number of header columns to update with the table?

jlaramie

I have a table that loads data with an initial number of columns. The user can submit to the server and the results can have a different number of columns. The table rows update the number of columns fine but if the table sets the scrollX attribute the number of header columns does not update. If the scrollX attribute is not set the header updates fine but of course squeezes in the columns. I have built a JSFiddle, link below, to simulate what happens. I have tried a bunch of suggestions that I've read here, including using JQuery to remove the header, to no avail. Any ideas???

http://jsfiddle.net/252r3cse/1/

Thanks,

Jim