Jquery 隐藏表列的溢出会影响可折叠列的隐藏
我有以下jQuery footable插件表:Jquery 隐藏表列的溢出会影响可折叠列的隐藏,jquery,html-table,footable,Jquery,Html Table,Footable,我有以下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-so
<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>
名称
作者
描述
上传
到期
登记
要点
出版
调查
调查名称
行动
@foreach(Model.CourseList中的var课程)
{
@当然,名字
@当然,作者
@课程描述
@course.UploadDate.ToShortDateString()文件
@course.ExpiryDate.ToShortDateString()
@课程、注册、计数
@课程.参与点
@课程号已发布
@Model.HasSurvey(course.CourseID)
@Model.GetSurveyName(course.CourseID)
}
如果我输入文本“abcdefghijklmnopqrstuvwxyzbcdfghijklmnopqrstuvwxyz”而不带任何空格,则列不会自动隐藏,表格会在页面上延伸。以前有没有人看到过这一点?如果有,你有什么解决问题的办法吗
这里显示的小提琴:我认为这将解决您的问题:
.footable td {
word-break: break-all;
}
这将强制一个长的不间断字符串在表格单元格中换行,而不强制单元格宽度扩展
请参见演示:
参考资料:您发布的代码并未真正显示问题所在。您的服务器端标签使构建演示变得困难。如果您将第一列中的“查询”文本更新为“abcdefghijklmnopqrstuvxyzabcdefghijklmnopqrstuvxyz”,您将看到问题将您的小提琴添加到您的问题中,以便其他人可以看到并帮助您!谢谢我试过了。您看到的是正常的表行为。非中断字符串导致表单元格展开,从而导致表溢出。但是,隐藏的列仍然是隐藏的,因此插件可以正常工作。真正的问题是处理非破坏性文本。我会集中精力的。这是一个隐藏的专栏,它似乎仍然显示。我把这个展示在了这一行的扩展部分,似乎有足够的空间放它,只是无法理解你是一个传奇人物,非常感谢马克,非常感谢你的帮助,这让我发疯:)没问题!现在我了解了footable以及如何在JSFIDLE中设置引导演示,也非常感谢您!