寬度問題從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%}