Overspill of hidden table column affecting the footable column hides

Question

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/

Answer 1

I think this will solve your problem:

.footable td {
    word-break: break-all;
}

This will force a long non-breaking string to wrap within the table cell without forcing the cell width to expand.

See demo at: http://jsfiddle.net/audetwebdesign/wStug/

Reference: http://www.w3.org/TR/css3-text/#word-break