Q:

Issue with responsive tables (foundation 5) in Rails app

I am implementing some tables in my Rails 4 App. I am using ZURB Foundation 5 framework to do this. 
The Issue I am encountering is on the mobile version of the table. In browser and Tablet views the table works as expected... However on mobile phone displays the table shows column 1 twice then scrolles through the rest of the columns (thats fine... the issue is just the duplicated first column and i am not sure how to get rid of this at all?? 
Table Code: 
<table class="responsive">
<thead>
<tr>
<th width="150">TEST TEST 1</th>
<th width="150">TEST TEST 2</th>
<th width="150">TEST TEST 3</th>
<th width="150">TEST TEST 4</th>
<th width="150">TEST TEST 5</th>
<th width="150">TEST TEST 6</th>

</tr>
</thead>
<tbody>
<tr>
  <td>ANSWER 1</td>
  <td>ANSWER 2</td>
  <td>ANSWER 3</td>
  <td>ANSWER 4</td>
  <td>ANSWER 5</td>
  <td>ANSWER 6</td>

</tr>
</tbody>

My App Layout.html.erb has the following in the header: 
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title><%= content_for?(:title) ? yield(:title) : "PatrolPro R.M.S - Demo" %></title>

    <%= stylesheet_link_tag    "application" %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag "responsive-tables" %> -- Adeed As per Foundation
    <%= javascript_include_tag "responsive-tables" %> -- Added As per Foundation
  </head>

A:

I had the same problem. I'm not an expert and I expect there may be a neater solution than this - but it has worked for me. The problem was that Turbolinks was causing the JS code to be called more than once. I edited the responsive_tables.js file to the following. Note the global variable switched which you may like to rename throughout this code if you think it might clash with other code on your site:
var switched = false;

$(document).ready(function() {

  var updateTables = function() {
    if (($(window).width() < 767) && !switched ){
      switched = true;
      $("table.responsive").each(function(i, element) {
        splitTable($(element));
      });
      return true;
    }
    else if (switched && ($(window).width() > 767)) {
      switched = false;
      $("table.responsive").each(function(i, element) {
        unsplitTable($(element));
      });
    }
  };

  $(window).load(updateTables);

});

$(window).bind('page:change', function() {

  switched = false;

  var updateTables = function() {
    if (($(window).width() < 767) && !switched ){
      switched = true;
      $("table.responsive").each(function(i, element) {
        splitTable($(element));
        console.log('here');
      });
      return true;
    }
    else if (switched && ($(window).width() > 767)) {
      switched = false;
      $("table.responsive").each(function(i, element) {
        unsplitTable($(element));
      });
    }
  };

  if (!switched) {
    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]);
  });
}

