隐藏表列溢出影响可脚注列隐藏答案

【问题标题】：Overspill of hidden table column affecting the footable column hides隐藏表列溢出影响可脚注列隐藏
【发布时间】：2013-09-06 11:08:55
【问题描述】：

我有以下 jQuery footable 插件表：

<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>

如果我输入没有任何空格的文本“abcdefghijklmnopqrstuvwxyzbcdefghijklmnopqrstuvwxyz”，则不会自动隐藏列，并且表格会横跨整个页面。有没有人见过这个，如果有的话，你有解决这个问题的办法吗？

这里显示的小提琴：http://jsfiddle.net/4RpE8/10/

【问题讨论】：

您发布的代码并没有真正显示问题。您的服务器端标签使构建演示变得困难。
jsfiddle.net/4RpE8/6 如果您将第一列中的“查询”文本更新为“abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz”，您将看到问题
将您的小提琴添加到您的问题中，以便其他人可以看到并帮助您！谢谢！
刚试过。您看到的是正常的表行为。不间断的字符串导致表格单元格扩展并导致表格溢出。但是，隐藏的列仍然是隐藏的，因此插件可以正常工作。真正的问题是处理不间断的文本。我会专注于此。
这是一个隐藏的列，它似乎仍然显示。我在行的展开部分显示了这个，似乎有足够的空间让它无法理解

标签： jquery html-table footable

【解决方案1】：

我认为这会解决你的问题：

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

这将强制一个长的不间断字符串在表格单元格内换行，而不会强制单元格宽度扩大。

查看演示：http://jsfiddle.net/audetwebdesign/wStug/

参考：http://www.w3.org/TR/css3-text/#word-break

【讨论】：

你是个传奇，非常感谢 Marc 非常感谢你的帮助，这让我发疯 :)
没问题！我现在知道了 footable 以及如何在 jsfiddle 中设置 Bootstrap 演示，也非常感谢你！