jQuery DataTable overflow and text-wrapping issues

Question

I have the following DataTable (full-width css class sets width = 100%)

<table class="datatable full-width">
    <thead>
        <th>LOB</th>
        <th>Creditor Line 1</th>
        <th>Creditor Line 2</th>
        <th>Address</th>
        <th>City</th>
        <th>State</th>
        <th>Zip</th>
        <th></th>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Javascript:

var profileTable =
            $(".datatable").dataTable({
                "iDisplayLength": 25,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bAutoWidth": false
            });

Everything works fine until there is a record with a long text string...when a record appears with really long text, the data table overflows on the right of the page. (See Screenshot Below, the red line is where the page should end) http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg

Can someone tell me how to either wrap the text in the cells or prevent this overflow issue?

I've tried via 'table-layout: fixed'...this prevents the overflow but sets all of the columns to the same width.

Thanks

Solution 1

I settled for the limitation (to some people a benefit) of having my rows only one line of text high. The CSS to contain long strings then becomes:

.datatable td {
  overflow: hidden; /* this is what fixes the expansion */
  text-overflow: ellipsis; /* not supported in all browsers, but I accepted the tradeoff */
  white-space: nowrap;
}

[edit to add:] After using my own code and initially failing, I recognized a second requirement that might help people. The table itself needs to have a fixed layout or the cells will just keep trying to expand to accomodate contents no matter what. If DataTables styles or your own styles don't already do so, you need to set it:

table.someTableClass {
  table-layout: fixed
}

Now that text is truncated with ellipses, to actually "see" the text that is potentially hidden you can implement a tooltip plugin or a details button or something. But a quick and dirty solution is to use JavaScript to set each cell's title to be identical to its contents. I used jQuery, but you don't have to:

  $('.datatable tbody td').each(function(index){
    $this = $(this);
    var titleVal = $this.text();
    if (typeof titleVal === "string" && titleVal !== '') {
      $this.attr('title', titleVal);
    }
  });

DataTables also provides callbacks at the row and cell rendering levels, so you could provide logic to set the titles at that point instead of with a jQuery.each iterator. But if you have other listeners that modify cell text, you might just be better off hitting them with the jQuery.each at the end.

This entire truncation method will ALSO have a limitation you've indicated you're not a fan of: by default columns will have the same width. I identify columns that are going to be consistently wide or consistently narrow, and explicitly set a percentage-based width on them (you could do it in your markup or with sWidth). Any columns without an explicit width get even distribution of the remaining space.

That might seem like a lot of compromises, but the end result was worth it for me.

Solution 2

The following CSS declaration works for me:

.td-limit {
    max-width: 70px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Solution 3

You can try setting the word-wrap however it doesn't work in all browsers yet.

Another method would be to add an element around your cell data like this:

<td><span>...</span></td>

Then add some css like this:

.datatable td span{
    max-width: 400px;
    display: block;
    overflow: hidden;
}

Solution 4

The same problem and I solved putting the table between the code

<div class = "table-responsive"> </ div>

Solution 5

Just simply the css style using white-space:nowrap works very well to avoid text wrapping in cells. And ofcourse you can use the text-overflow:ellipsis and overflow:hidden for truncating text with ellipsis effect.

<td style="white-space:nowrap">Cell Value</td>

View more solutions

Comments

[thiag0]

I have tried using that without 'table-layout: fixed' with no positive results.

[thiag0]

Thanks for your response. This solution limits the column size and hides the overflow, however it did not work for wrapping the text in the cell.

[David Gallagher]

You can try the solutions from this page, however there is not yet a solution which works for all browsers consistently. The most consistent solutions involve adding a special character after every character but it is rather hackish. When I have done something like this before is made it so that you could hover over the cutoff text and a popup would appear to show the hidden text shown. That has the advantage of saving vertical space too.

[2rs2ts]

I can't get this to work for me. Datatables refuses to respect these CSS properties, and will only wrap strings when they are hyphenated.

[Greg Pettit]

Some CSS not indicated but described are that the cells must have a height set on them which will contain only one line of text. This will not work for multi-line text. In fact, it should NOT be wrapping at all; this is the "white-space: nowrap" in action.

[Leo the lion]

Well it works but row height will increase. Any solution like tool tip or just ...?

[Deepesh Thapa]

Also remove nowrap class from table if you have used one