Question

使用http://datatables.net/中的数据表，如何阻止它在页面上溢出？ enter image description here

编辑：

<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，字符串将被“切断”。这并不总是在视觉上令人愉悦，但有时网络开发是妥协。

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

但那你怎么看整个数据？棘手的一个。我刚刚在fnRowCallback回调中运行了一个脚本，它将单元格的标题设置为与其内容相同。然后在鼠标悬停时，工具提示会显示内容。我确信有更好的方法。

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

Answer 2

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

Answer 3

应用自定义宽度，例如：

.dataTables_wrapper {width:60%}

来自http://datatables.net/的宽度问题

3 个答案: