I have tables set up in my Rails 4 App with the ZURB Foundation 5 framework.
The problem lies with the mobile version of the table. It works fine on browsers and tablets, but on mobile phones, it shows the first column twice before scrolling through the rest of the columns. I can't figure out how to remove this duplicated first column. Any ideas?
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" %> -- Added according to Foundation
<%= javascript_include_tag "responsive-tables" %> -- Added according to Foundation
</head>