JQuery changing th width after multiple plugins

Question

I am trying to make a table with a scrollable tbody within a table using this plugin. There are plenty of other questions about jquery or pure-css scrollable tbody elements, but none as involved as mine.

The issue is that I'm also using a jQuery tablefilter plugin which adds an additional header row for filters. When I load the tablescroll plugin, it overrides the table dimensions and my headers no longer match.

The columns are variable width and the tablescroll plugin assumes they are equal length which causes the improper alignment.

I tried resetting them manually using javascript Here:

var $table = $(".tablescroll"),
$cols = $(".tablescroll tr td").slice(0,5),
$th = $(".fixedHeader tr th");
$table.tableScroll();
$filter = $(".filterRow th");
$.each($th, function(index, value){
      $th[index].style.width = $cols[index]['clientWidth'];
      $filter[index].style.width = $cols[index]['clientWidth'];
});

and it adds the correct style attribute to each th but the headers keep the same incorrect alignment. This is also the VERY LAST javascript loaded on the page.

Here's my HTML:

<form>
<table class="tablescroll">
          <thead class="fixedHeader">
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Site</th>
                <th>Created Date</th>
                <th>Modified Date</th>
            </tr>
        </thead>
                    <tbody>
            <tr>
                <td>Test Name</td>
                <td>Test Description</td>
                <td>Test Site</td>
                <td>2013-12-18 15:20:05</td>
                <td>2014-01-29 19:36:09</td>
            </tr>
                    </tbody>
    </table>

</form>

I'm curious why my javascript calls add the style but change nothing about the appearance and if I should continue with this plugin or simply work out a pure css solution.

Thanks in advance.

Answer 1

Like @jkgm777 said, the plugin removes the headers and creates a new table for them. This threw off all the css and js that was referencing the header class in the specific table which caused the behavior.

My solution will require a pure-css version due to sorting and filtering functionality that will not work across tables.

Answer 2

Did you try setting the inline style for the table instead of using Javascript?

<table style="width:##px;">

or for the header column directly

<tr><th style="width:##px;"></th></tr>