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

DataTables 函数无助于故障排除。这是一个CSS问题。还有一个内容问题。先说内容：

表格大小是“模糊的”；该表将尽最大努力根据您的建议调整大小，并在可能的情况下与您的建议完全匹配。但是，当你有一个很长的字符串时（我相信我看到了一个很长的 A 和 D 序列，对吗？）它别无选择。它将使列尽可能宽以适应内容。然后，其他列将尽可能窄，并且仍然可以容纳您的内容。

解决方案？ CSS。归结为overflow: hidden。在您的样式表中，将您的 TD 元素设置为使用 overflow: hidden，字符串将被“截断”。这在视觉上并不总是令人愉悦，但有时 Web 开发需要妥协。

其中一个折衷方案是同时设置text-overflow: ellipsis。任何无法放入单元格的文本都将被截断，省略号（三个紧缩的点；它是一个字符，而不是三个实际点）将插入到它被截断的末尾。

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

最后，你需要问的是：这样的超长字符串是否现实？预期的内容是什么？

Answer 2

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

Answer 3

应用自定义宽度，例如：

.dataTables_wrapper {width:60%}