我有以下jQuery可脚插件表:
<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/
我认为这将解决您的问题:
.footable td {
word-break: break-all;
}
这将强制长不间断字符串在表单元格内换行,而不会强制扩展单元格宽度。
观看演示:http://jsfiddle.net/audetwebdesign/wStug/
参考:http://www.w3.org/TR/css3-text/#word-break