Doesn't calculate rows that use colspan properly.

[justinluk]

When the table gets split into two, the column on the left will retain the row that contained the colspan. However the table on the right will be missing the row entirely which causes the two table to be out of sync.

[robinVR]

+1

[alexburr]

+1

[jasonhuck]

Ack. Anyone have a patch for this yet?

[nerea91]

Same problem, anyone have a solution?

[nerea91]

This is not the best way but this works for me. I modified responsive-tables.js:

$(document).ready(function() { var switched = false; var changeColspanTh = false; var changeColspanTf = false; var updateTables = function() { if (($(window).width() < 767) && !switched ){

  switched = true;
  $("table.responsive").each(function(i, element) {
    splitTable($(element));
  });

  $(".scrollable table.responsive > thead > tr:first-child > th:first-child").each(function(i, element) { 

      var element = $(element);

      if(element.attr('colspan') > 1) {
        changeColspanTh = true;

        var colspan = parseInt(element.attr('colspan'));

        element.attr('colspan', colspan-1);
        element.css('display', 'table-cell');
      }
  });

  $(".scrollable table.responsive > tfoot > tr > td:first-child").each(function(i, element) {

      var element = $(element);

      if(element.attr('colspan') > 1) {
          changeColspanTf = true;

          var colspan = parseInt(element.attr('colspan'));

          element.attr('colspan', colspan-1);
          element.css('display', 'table-cell');
      }
  });
  return true;
}
else if (switched && ($(window).width() > 767)) {
  switched = false;
  $("table.responsive").each(function(i, element) {
    unsplitTable($(element));
  });

  if(changeColspanTh)
      $("table.responsive > thead > tr:first-child > th:first-child").each(function(i, element) {
         var element = $(element);
        $(element).attr('colspan', parseInt($(element).attr('colspan'))+1);
    });

  if(changeColspanTf)
    $("table.responsive > tfoot > tr > td:first-child").each(function(i, element) {
        var element = $(element);
        element.attr('colspan', parseInt(element.attr('colspan'))+1);

    });

  changeColspanTh = false;
  changeColspanTf = false;
}

};

$(window).load(updateTables); $(window).on("redraw",function(){switched=false;updateTables();}); // An event to listen for $(window).on("resize", updateTables);

function splitTable(original)
{
    original.wrap("<div class='table-wrapper' />");

    var copy = original.clone();
    copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
    copy.removeClass("responsive");

    original.closest(".table-wrapper").append(copy);
    copy.wrap("<div class='pinned' />");
    original.wrap("<div class='scrollable' />");

setCellHeights(original, copy);
}

function unsplitTable(original) {
original.closest(".table-wrapper").find(".pinned").remove();
original.unwrap();
original.unwrap();
}

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, 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]);
});

}

});