css - 来自 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 回调中运行一个脚本，将单元格的标题设置为与其内容相同。然后在鼠标悬停时，工具提示会显示内容。我相信有更好的方法。

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