Width issue from http://datatables.net/

Question

Using a data table from http://datatables.net/ , How can i stop it from overflowing on the page?

EDIT:

<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

The DataTables function won't help with trouble-shooting. It's a CSS issue. And also a content issue. First the content:

Sizing on tables is "fuzzy"; the table will do its best to size to your suggestions, and will exactly match your suggestions when it can. When you have a huge long string, though (I believe I'm seeing a whole long series of A's and D's, right?) it has no choice. It will make the column as wide as it needs to be to fit the content. The other columns will then be as narrow as they can be and still accomodate your content.

The solution? CSS. It boils down to overflow: hidden. In your stylesheet, set your TD elements to use overflow: hidden and the string will get "chopped off". This isn't always visually pleasing, but sometimes web development is about compromise.

One of those compromises is to also set text-overflow: ellipsis. Any text that can't fit into the cell will be truncated and the ellipsis symbol (three tightly-kerned dots; it's a single character, not three actual dots) will be inserted at the end where it gets cut off.

But then how do you see the data in its entirety? Tricky one. I've just been running a script in the fnRowCallback callback that sets the title of the cell to be the same as its contents. Then on mouseover, a tooltip shows you the content. I'm sure there are better ways.

In the end, what you need to ask is: is a super-long string like that even realistic? What's the expected content?

Answer 2

http://datatables.net/styling/ids_classes has a list of the classes/ids applied - can't you just set a width on the wrapper element?

Answer 3

Apply custom width, e.g.:

.dataTables_wrapper {width:60%}