I have the following jQuery footable plugin table:
<table data-filter="#filter" class="footable" data-page-size="10">
<thead>
<tr>
<th data-class="expand"> Name</th>
<th data-hide="phone,tablet" data-sort-initial="true"> Author</th>
<th data-hide="phone,tablet" data-sort-initial="true"> Description</th>
<th data-hide="phone,tablet" data-sort-initial="true"> Uploaded</th>
<th data-hide="phone,tablet" data-sort-initial="true"> Expires</th>
<th data-chide="phone,tablet" data-sort-initial="true" data-type="numeric"> Enrolled</th>
<th data-hide="phone,tablet" data-sort-initial="true" data-type="numeric"> Points</th>
<th data-chide="phone,tablet" data-sort-initial="true"> Published</th>
<th data-chide="phone,tablet" data-sort-initial="true"> Survey</th>
<th data-hide="phone,tablet" data-sort-initial="true"> Survey Name</th>
<th data-chide="phone,tablet" data-sort-initial="true"> Actions</th>
</tr>
</thead>
<tbody>
@foreach (var course in Model.CourseList)
{
<tr>
<td>@course.Name</td>
<td>@course.Author</td>
<td>@course.Description</td>
<td>@course.UploadDate.ToShortDateString()</td>
<td>@course.ExpiryDate.ToShortDateString()</td>
<td>@course.Enrollments.Count</td>
<td>@course.ParticipationPoints</td>
<td>@course.IsPublished</td>
<td>@Model.HasSurvey(course.CourseID)</td>
<td>@Model.GetSurveyName(course.CourseID)</td>
<td><a href="@Url.Action("ViewCourse", "Admin", new { id = @course.CourseID })" class="view" title="View"> <i class="icon20 icon-zoom-in"></i></a>
<a href="@Url.Action("EditCourse", "Admin", new { id = @course.CourseID })" class="edit" title="Edit"><i class="icon20 icon-edit"></i></a>
<a href="@Url.Action("DeleteCourse", "Admin", new { courseID = @course.CourseID })" class="delete" title="Delete"><i class="icon20 icon-remove"></i></a>
<a href="@Url.Action("PublishCourse", "Admin", new { courseID = @course.CourseID })" class="publish" title="Publish/Unpublish"><i class="icon20 icon-book"></i></a>
<a href="@Url.Action("BulkTargetCourse", "Admin", new { courseID = @course.CourseID })" class="target" title="Bulk Target"><i class="icon20 icon-screenshot"></i></a></td>
</tr>
}
</tbody>
<tfoot class="footable-pagination">
<tr>
<td colspan="8"><ul id="pagination" class="footable-nav" /></td>
</tr>
</tfoot>
</table>
If I enter the text "abcdefghijklmnopqrstuvwxyzbcdefghijklmnopqrstuvwxyz" without any spaces the columns are not automatically hidden and the table stretches across the page. Has anyone see this before and if so have you got any solutions for the problem?
Fiddle shown here: http://jsfiddle.net/4RpE8/10/