Row size not constrained between "Scrollable" and "Pinned"

[Kristi06]

I've got just a few tables that I'm having issues with....it seems to happen only when the first column, which stays pinned has more information than the following columns, which are scrollable.

In this instance, the columns that are scrollable - their rows seem to move up to accomodate for the information presented - regardless of how that affects the associated row in column 1. So - the information in the scrollable columns isn't matching up correctly to the information in the pinned column - and ends up cutting off several cells in the first column.

You can see from the image that I've uploaded that there should be 4 rows (the alternating colors should give you a clue) and as you can see - only 2 images in the first column are showing up - even though there are supposed to be 4.

[georgeemr]

Hi, in my case, I resolve this by adding 2 lines: (Replace the function setCellHeights(original,copy))

function setCellHeights(original, copy) {

var tr = original.find('tr'),
        tr_copy = copy.find('tr'),
        td = copy.find('td'),
        heights = [];

    tr.each(function (index) {
        var self = $(this),
            tx = self.find('td'); //omit TH in my case, you can put it back.
        tx.each(function (index2) { // Access to this index
            var height = $(this).outerHeight(true);
            heights[index] = heights[index] || 0;
            if (height > heights[index])
                heights[index] = height;

            if (index2 > 0 && $(this).height() < height) // New line
                $(this).attr("style","height:"+heights[1]+"px");
        });

    });

    tr_copy.each(function (index) {
        $(this).height(heights[index]);
    });
}    

[umphy]

I have fixed this issue by a simpler method, which is to modify the same method, but omit td rather than omit th like @georgeemr. Below is my code based on the latest version as of writing:

  function setCellHeights(original, copy) {
    var tr = original.find('tr'),
        tr_copy = copy.find('tr'),
        heights = [];

    tr.each(function (index) {
      var self = $(this),
          tx = self.find('th'); //omit td

      tx.each(function () {
        var height = $(this).outerHeight(true);
        heights[index] = heights[index] || 0;
        if (height > heights[index])
            heights[index] = height;
      });

    });

    tr_copy.each(function (index) {
      $(this).height(heights[index]);
    });
  }

[umphy]

Sorry my previous answer is incomplete and doesn't handle all cases. I have created a fork to fix this issue. Works for me now.