jQuery - Loop Through TD widths and then Loop through TH and apply TD widths

Question

I have a fluid table that now needs a fixed thead. The issue being when you make the thead fixed the th-s don't respect the width of the tbody's td-s. The sizing of the columns are all handled with BootStrap. I have read quite a bit on this subject and seen two solutions. For argument's sake both will not work for me.

1. Lock down widths on the table, th, and tds. So no responsive widths - hence horizontal scrolling.

2. Use jquery to find the window width and return the height to the table. Then do a inner table scroll with a locked header. (example of found solution http://www.bootply.com/JnOYtO9xzn#)

What I would like to try is find the width on all the td and pass those width to the corresponding th (if I need to apply classes like th1, td1 so be it). Essentially I am trying to binding the td widths to the th. Also, on window width change update.

Table example: http://jsfiddle.net/u2xZU/165/ or https://jsfiddle.net/5hozvm5d/4/

Answer 1

This will ensure that the ths in thead always equal the widths of the tds in their column:

var timer;
$(window).resize(function() {
  clearTimeout(timer);
  timer= setTimeout(function() {
    $('.table tbody tr:first td').each(function(idx) {  //get the first row of tds
      $('.table thead tr:first th').eq(idx)
        .width($(this).width());                        //set corresponding th width
    });
  },10);
}).resize();

Using setTimeout() prevents the function from running constantly as the window is resized.

Fiddle

Answer 2

It's pretty complicated. You might consider using the DataTable plug-in referenced here Scrollable table with fixed header in bootstrap