42

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

Greg Pettit
  • 10,749
  • 5
  • 53
  • 72
thiag0
  • 2,199
  • 5
  • 31
  • 51

10 Answers10

44

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.

Greg Pettit
  • 10,749
  • 5
  • 53
  • 72
  • 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. – 2rs2ts Nov 27 '13 at 20:48
  • 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. – Greg Pettit Nov 28 '13 at 14:59
19

The following CSS declaration works for me:

.td-limit {
    max-width: 70px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
nietonfir
  • 4,797
  • 6
  • 31
  • 43
Mukesh Salaria
  • 3,345
  • 1
  • 16
  • 21
10

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;
}
David Gallagher
  • 723
  • 4
  • 8
  • 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. – thiag0 Nov 09 '11 at 02:00
  • You can try the solutions from [this page](http://stackoverflow.com/questions/1258416/word-wrap-in-a-html-table), 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. – David Gallagher Nov 09 '11 at 02:53
6

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

<div class = "table-responsive"> </ div>
César Augusto
  • 593
  • 1
  • 7
  • 7
4

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>
Lucky
  • 16,787
  • 19
  • 117
  • 151
3

I'm way late here, but after reading @Greg Pettit's answer and a couple of blogs or other SO questions I unfortunately can't remember I decided to just make a couple of dataTables plugins to deal with this.

I put them on bitbucket in a Mercurial repo. I follwed the fnSetFilteringDelay plugin and just changed the comments and code inside, as I've never made a plugin for anything before. I made 2, and feel free to use them, contribute to them, or provide suggestions.

  • dataTables.TruncateCells - truncates each cell in a column down to a set number of characters, replacing the last 3 with an ellipses, and puts the full pre-truncated text in the cell's title attributed.

  • dataTables.BreakCellText - attempts to insert a break character every X, user defined, characters in each cell in the column. There are quirks regarding cells that contain both spaces and hyphens, you can get some weird looking results (like a couple of characters straggling after the last inserted
    character). Maybe someone can make that more robust, or you can just fiddle with the breakPos for the column to make it look alright with your data.

JustinP8
  • 1,353
  • 1
  • 14
  • 33
3

I faced the same problem of text wrapping, solved it by changing the css of table class in DT_bootstrap.css. I introduced last two css lines table-layout and word-break. 

   table.table {
    clear: both;
    margin-bottom: 6px !important;
    max-width: none !important;
    table-layout: fixed;
    word-break: break-all;
   }
Harish Lalwani
  • 754
  • 5
  • 20
1

Try adding td {word-wrap: break-word;} to the css and see if it fixes it.

ScottS
  • 71,703
  • 13
  • 126
  • 146
0

You can just use render and wrap your own div or span around it. TD`s are hard to style when it comes to max-width, max-height, etc. Div and span is easy..

See: https://datatables.net/examples/advanced_init/column_render.html

I think a nicer solution then working with CSS hacks which are not supported cross browser.

user1281146
  • 167
  • 3
  • 17
0

Using the classes "responsive nowrap" on the table element should do the trick.

wattry
  • 936
  • 10
  • 22