CODEWITHSUNDEEP
datatableheaderalignment
Ashwani Kumar
Ashwani Kumar

Reputation: 663

datatable column header alignment issue

The issue is with chrome and IE. If we add scrolling option while making datatable the table header not aligned with the table. otherwise it is fine.

"scrollY" : 200, "scrollCollapse" : true, "sScrollX" : "100px",

Upvotes: 4

Views: 19356

Answers (6)

Honnappa
Honnappa

Reputation: 61

I have simple and working fine solution you can use it

If we are using datatable scroll,Dom itself create two times table and thead but in scroll body thead height is 0 set by library.

Please remove all external padding whatever added by you it will work fine

Remove Padding whatever added by other CSS, keep only datable library padding

Upvotes: 0

Suresh Kamrushi
Suresh Kamrushi

Reputation: 16076

You can do like this:

$('#DataTableID').DataTable({
  //"scrollX": true,            
  "initComplete": function (settings, json) {  
    $("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});

Upvotes: 0

Ravi Hirani
Ravi Hirani

Reputation: 6539

Just write,

$(".dataTables_scrollBody").width($(".dataTables_scrollHead").width());

also write "scrollX": true

Upvotes: 0

quilkin
quilkin

Reputation: 1427

If the table's html is created programmatically, I needed a delay between creating the html and creating the table itself. It's possible that the delay needs changing for different browsers.

$(tableID + 'Table').html('<table class="display" id="' + tableID.substring(1) + '"></table>');
this.show = function (onclick) {
    // onclick is the function (if any) to be run when a row is clicked
    var defs = this.tableDefs;
    // workaround delay to allow column headers to be resized. Needs a delay after being created, before being shown
    setTimeout(function () {
        table = $(tableID).DataTable(defs);
        $(tableID + ' tbody tr').on('click', function () {
            var nTds = $('td', this);
            onclick(nTds);
        });
    }, 200);

Upvotes: 0

amoljore
amoljore

Reputation: 71

This may help,

$(".dataTables_scrollHeadInner").css({"width":"100%"});
$(".table ").css({"width":"100%"});

I placed it in my drawCallback function, and that worked for me(you can add it to yourstyle.css)

Upvotes: 7

Ashwani Kumar
Ashwani Kumar

Reputation: 663

Hi we can solve the issue by adding our own custom scrolling facility.

  • steps:)

    1. remove the scroll options while making datatable.
    2. wrap the table with div: $('#'+tableId).wrap("<div class='scrolledTable'></div>");
    3. give css property for scrolledTable class.

    .scrolledTable{ overflow-y: auto; clear:both; }

    1. Finish.

Upvotes: 17

Related Questions