DataTables jquery add a DIV around all the TD in my tables

Question

I am using DataTables formatting on my tables. I use Server Side processing and fixed header and footer.

I am seeing inconsistencies in the way the <td> values are displayed when the text is long for different browsers.

1. Chrome I get a usable scrollbar (the expected outcome)
2. IE I see the scrollbar, but can't use it
3. Firefox the long text just overflows to the right

I know that if I can surround the <td>Long Text</td> in a <div class="Scrollable"><td>Long Text</td></div> that this would fix it. I have done this on other tables that are not using DataTable formatting. I just can't seem to get it to work.

Here's how I'm initializing my table:

<script type="text/javascript" class="init">
    $.fn.dataTable.ext.buttons.export =
    {
        className: 'buttons-alert',
        "text": "Export All Test",
        action: function (e, dt, node, config)
        {
            alert('Export All Test');
        }
    };

    $(document).ready(function ()
    {

        // Setup - add a text input to each footer cell
        $('#DataTable tfoot th').each(function ()
        {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });

        var table = $('#DataTable').DataTable({
            "lengthMenu": [[25, 50, 75, 100, 150,-1], [25, 50, 75, 100, 150,'All']],
            "dom": '<"top"Bifl<"clear">>rt<"bottom"i<"clear">>',
            "buttons": [{
                extend: 'collection',
                text: 'Selection',
                buttons: ['selectAll', 'selectNone']
            }, {
                extend: 'collection',
                text: 'Export',
                buttons: ['export', 'excel', 'csv', 'pdf', { extend: 'excel',
                    text: 'Export Current Page',
                    exportOptions: {
                        modifier: {
                            page: 'current'
                        }
                    },
                    customize: function (xlsx)
                    {
                        var sheet = xlsx.xl.worksheets['sheet1.xml'];
                        $('row:first c', sheet).attr('s', '7');
                    }
                },

                {
                    text: 'Export All to Excel',
                    action: function (e, dt, button, config)
                    {
                        dt.one('preXhr', function (e, s, data)
                        {
                            data.length = -1;
                        }).one('draw', function (e, settings, json, xhr)
                        {
                            var excelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
                            var addOptions = { exportOptions: { 'columns': ':all'} };

                            $.extend(true, excelButtonConfig, addOptions);
                            excelButtonConfig.action(e, dt, button, excelButtonConfig);
                        }).draw();
                    }
                }]
            }
            ],
            "fixedHeader": {
                header: true,
                footer: true
            },
            "select": true,
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "./ServerSide.php",
                "type": "POST"
            },
            initComplete: function ()
            {
                var api = this.api();

                // Apply the search
                api.columns().every(function ()
                {
                    var that = this;

                    $('input', this.footer()).on('keyup change', function ()
                    {
                        if (that.search() !== this.value)
                        {
                            that
                              .search(this.value)
                              .draw();
                        }
                    });
                });
            }
        });
        //This is what I've tried to get the DIV in place, but it doesn't work.
        $('#DataTable tbody td').wrap('<div class="Scrollable"></div>');
    });
</script>

I have this in my CSS This should allow the scrollbar to be present and usable in all browsers

div.Scrollable {
    overflow-x: auto;
    width: 100%;
}

This should make the Long Text wrap around and increase the height of the row to accommodate it.

.selected {
    background-color: #999999 !important;
    color: #fff;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word;
    max-height: 500px;
}

I don't know enough about jquery to figure this out.

EDIT

I have tried this as well:

$('#DataTable td').wrap(function(){ return "<div class='Scrollable'></div>"});

EDIT 2

I've just realized I've been trying to do this backward. I need the <td></td> wrapped around the <div></div> so that it'll be like <td><div class="Srcollable">Text Value</div></td>

Here's a fiddle of the problem. It's not a problem in Chrome, though, it is a problem in IE and Firefox.

The first and third rows are without the <div> the second row has the <div> and has the usable scrollbar.

Answer 1

I just figured it out!

In my modified version of the ssp.class.php file (from here) I updated the data_output function so that it will add the <div> around the values that it returns so that when the DataTable is initialized the <div> is already in place and the <td> is placed around it.

The function now looks like this:

static function data_output($columns,$data)
{
    $DateFields = include 'DateFields.php';
    $out = array();
    for($i=0,$ien=count($data);$i<$ien;$i++)
    {
        $row = array();
        for($j=0,$jen=count($columns);$j<$jen;$j++)
        {
            $column = $columns[$j];
            if(isset($column['Formatter']))
            {
                echo "Formatter<br>";
                $row[$column['dt']] = $column['Formatter']($data[$i][$column['db']],$data[$i]);
            }
            else
            {   //This is were I added the <div> around the value returned.                 
                $row[$column['dt']] = "<div class='Scrollable'>" .$data[$i][$columns[$j]['db']]. "</div>";
                if(in_array($column['db'],$DateFields,TRUE) && $row[$column['dt']] != '')
                {
                    $row[$column['dt']] = substr($data[$i][$columns[$j]['db']],5,2) . "/" . substr($data[$i][$columns[$j]['db']],8,2) . "/" . substr($data[$i][$columns[$j]['db']],2,2);
                }
            }
        }
        $out[] = $row;
    }
    return $out;
}