宽度问题从http://datatables.net/

Question

使用从http://datatables.net/的数据表，我怎样才能阻止它在页面上溢出？

编辑：

<script type="text/javascript"> 
$(document).ready(function() {  
    $('#comment').dataTable({ 
    "oLanguage": { 
     "sInfo": "", 
     "sInfoEmpty": "", 
     "sInfoFiltered": "" 
    }, 
    "sPaginationType": "full_numbers", 
    "iDisplayLength": 5, 
    "bLengthChange": false, 
    "aaSorting": [[3, 'desc']], 
    "aoColumns": [ 
     { "bSortable": false }, 
     null, 
     null, 
     { "asSorting": [ "desc" ] }, 
     null, 
     { "bSortable": false } 
    ] }); 
}); 
</script> 


<table id="comment"> 
     <thead> 
     <tr> 
     <th></th> 
     <th>Name</th> 
     <th>Comment</th> 
     <th>Created</th> 
     <th>Attachments</th> 
     <th><center>Delete?</center></th> 
     </tr> 
    </thead> 
    <tbody> 
    <% @company.comments.each do |comment| %> 
    <tr> 
     <td> 
     <% if comment.user.avatar.blank? %> 
     <%= image_tag("default_user.png", :height => "50", :width => "50") %> 
     <% else %> 
     <%= image_tag(comment.user.avatar_url, :height => "50", :width => "50") %> 
     <% end %> 
     </td> 
     <% if comment.user.name.nil? %> 
     <td><%= comment.user.email %></td> 
     <% else %> 
     <td><%= comment.user.name %></td> 
     <% end %> 
     <td><%=raw comment.body %></td> 
     <td><%= comment.created_at.to_s(:db) %></td> 
     <% if comment.file.blank? %> 
     <td></td> 
     <% else %> 
     <td><%= link_to comment.file_identifier, comment.file_url %></td> 
     <% end %> 
     <td><center><%= link_to image_tag("delete.png", :alt => "Delete", :height => "15px"), [comment.company, comment], :confirm => 'Are you sure?', :method => :delete %></center></td> 
    </tr> 
    <% end %> 
    </tbody> 
    </table> 

Answer 1

的数据表功能不会排除故障提供帮助。这是一个CSS问题。还有一个内容问题。首先是内容：

在表上调整大小是“模糊”的;表格会尽力根据您的建议进行调整，并在您的建议可以完全符合时提供。然而，当你有很长的弦时（我相信我看到了A和D的整个系列，对吗？），它别无选择。它会使列的宽度与它需要适合的内容一样宽。其他栏目将尽可能缩小并仍然适合您的内容。

解决方案？ CSS。它归结为overflow: hidden。在你的样式表中，将你的TD元素设置为使用overflow: hidden，字符串将被“砍掉”。这并不总是在视觉上令人愉悦，但有时网络的发展是妥协。

这些妥协之一是也设置text-overflow: ellipsis。任何无法放入单元格的文本都会被截断，省略符号（三个更紧密的点，它是一个单独的字符，而不是三个实际的点）将被插入到被截断的末尾。

但是，您如何看待整个数据？棘手的一个。我刚刚在fnRowCallback回调中运行了一个脚本，它将单元格的标题设置为与其内容相同。然后在mouseover上，工具提示会显示您的内容。我相信有更好的方法。

最后，你需要问的是：是一个超长的字符串，甚至是现实的？期望的内容是什么？

Answer 2

http://datatables.net/styling/ids_classes应用了类/ ID的列表 - 你就不能设置包装元素上的宽度？

Answer 3

应用定制的宽度，例如：

.dataTables_wrapper {width:60%}