Datatable specific column data truncate not work on chrome

Question

about one mouth ago, in chrome started not working my truncate function in chrome browser, but in edge it seems all good.

In chrome my datatable looks like this. IMG HOW DATATABLE LOOK IN CHROME IN FULL SIZE WINDOW

In edge and how i want to look it looks like this. IMG HOW DATATABLE LOOK IN EDGE IN FULL SIZE WINDOW, this way looks then window smaller IMG

My code js

 var table = $('#example').DataTable( {
        "processing": true, 
        "serverSide": false,
        "sScrollX": "100%",
        "pageLength": 50,
        "order": [[ 3, "asc" ]],
        "ajax": url,
        'columnDefs': [
            { targets: 5, className:"truncate"},
 ],
        createdRow: function(row){
            var tr = $(row).find(".truncate");
            tr.attr("title", tr.html());
       }

css

  .truncate {
    max-width:50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

Any idea why this messing up in chrome browser? Then in inspect html code looks like column getting .truncate class, but only rows must have it not column.

Thank you for our time

score 1 · Accepted Answer · answered Jun 28 '21 at 11:28

I just try this way, and looks in chrome and edge working. Just set in css this code and remove yours

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

more information are in here CSS text-overflow in a table cell?

Datatable specific column data truncate not work on chrome

1 Answers1