I'm working with DataTables and it works great. I wanted to add colspan/rowspan for header and it seems to be working fine for tables with small amount of columns (although on resize it doesn't look as great). However, when adding more and more columns things start to look really bad even thou visible columns didn't really change.

The image below shows the problem. The 1st table has same starting columns but then the 2nd table adds a lot more of them. Even thou there is same visible data on screen things look totally different.

Table 1

<div id="376557284" class="defaultContainerOther">
    <div class="defaultContainer defaultPanelOther collapsable" id="376557284">
        <div class="defaultPanel defaultCard">
            
            <script>                $(document).ready(function() {
                    $.fn.dataTable.moment( 'L' );
                    
                    
                    //  Table code
                    var table = $('#DT-hidsAXEi').DataTable(
                        {
    "dom":  "Bfrtip",
    "buttons":  [
                    {
                        "extend":  "copyHtml5"
                    },
                    {
                        "extend":  "excelHtml5"
                    },
                    {
                        "extend":  "csvHtml5"
                    },
                    {
                        "orientation":  "landscape",
                        "extend":  "pdfHtml5",
                        "pageSize":  "A3"
                    },
                    {
                        "extend":  "pageLength"
                    }
                ],
    "colReorder":  true,
    "paging":  true,
    "scrollCollapse":  false,
    "pagingType":  [
                       "full_numbers"
                   ],
    "lengthMenu":  [
                       [
                           15,
                           25,
                           50,
                           100,
                           -1
                       ],
                       [
                           15,
                           25,
                           50,
                           100,
                           "All"
                       ]
                   ],
    "ordering":  true,
    "order":  [

              ],
    "info":  true,
    "procesing":  true,
    "responsive":  {
                       "details":  true
                   },
    "select":  true,
    "searching":  true,
    "stateSave":  true,
    "columnDefs":  ""
}
                    );
                    
                });</script>
<div class="defaultPanelOther">

<table id="DT-hidsAXEi" class="display compact"><thead><tr><th colspan="2">Process Information</th>
<th rowspan="2">PriorityClass</th>
<th rowspan="2">FileVersion</th>
<th rowspan="2">HandleCount</th>
<th rowspan="2">WorkingSet</th>
<th colspan="3">Memory</th>
<th rowspan="2">TotalProcessorTime</th>
</tr>
<tr><th>Name</th>
<th>Id</th>
<th>PagedMemorySize</th>
<th>PrivateMemorySize</th>
<th>VirtualMemorySize</th>
</tr>
</thead>

Table 2

<div id="656845919" class="defaultContainerOther">
    <div class="defaultContainer defaultPanelOther collapsable" id="656845919">
        <div class="defaultPanel defaultCard"><script>                $(document).ready(function() {
                    $.fn.dataTable.moment( 'L' );
                    
                    
                    //  Table code
                    var table = $('#DT-amWhaXDO').DataTable(
                        {
    "dom":  "Bfrtip",
    "buttons":  [
                    {
                        "extend":  "copyHtml5"
                    },
                    {
                        "extend":  "excelHtml5"
                    },
                    {
                        "extend":  "csvHtml5"
                    },
                    {
                        "orientation":  "landscape",
                        "extend":  "pdfHtml5",
                        "pageSize":  "A3"
                    },
                    {
                        "extend":  "pageLength"
                    }
                ],
    "colReorder":  true,
    "paging":  true,
    "scrollCollapse":  false,
    "pagingType":  [
                       "full_numbers"
                   ],
    "lengthMenu":  [
                       [
                           15,
                           25,
                           50,
                           100,
                           -1
                       ],
                       [
                           15,
                           25,
                           50,
                           100,
                           "All"
                       ]
                   ],
    "ordering":  true,
    "order":  [

              ],
    "info":  true,
    "procesing":  true,
    "responsive":  {
                       "details":  true
                   },
    "select":  true,
    "searching":  true,
    "stateSave":  true,
    "columnDefs":  ""
}
                    );
                    
                });</script>
<div class="defaultPanelOther">

<table id="DT-amWhaXDO" class="display compact"><thead><tr><th colspan="2">Process Information</th>
<th rowspan="2">PriorityClass</th>
<th rowspan="2">FileVersion</th>
<th rowspan="2">HandleCount</th>
<th rowspan="2">WorkingSet</th>
<th colspan="3">Memory</th>
<th rowspan="2">TotalProcessorTime</th>
<th rowspan="2">SI</th>
<th rowspan="2">Handles</th>
<th rowspan="2">VM</th>
<th rowspan="2">WS</th>
<th rowspan="2">PM</th>
<th rowspan="2">NPM</th>
<th rowspan="2">Path</th>
<th rowspan="2">Company</th>
<th rowspan="2">CPU</th>
<th rowspan="2">ProductVersion</th>
<th rowspan="2">Description</th>
<th rowspan="2">Product</th>
<th rowspan="2">__NounName</th>
<th rowspan="2">BasePriority</th>
<th rowspan="2">ExitCode</th>
<th rowspan="2">HasExited</th>
<th rowspan="2">ExitTime</th>
<th rowspan="2">Handle</th>
<th rowspan="2">SafeHandle</th>
<th rowspan="2">MachineName</th>
<th rowspan="2">MainWindowHandle</th>
<th rowspan="2">MainWindowTitle</th>
<th rowspan="2">MainModule</th>
<th rowspan="2">MaxWorkingSet</th>
<th rowspan="2">MinWorkingSet</th>
<th rowspan="2">Modules</th>
<th rowspan="2">NonpagedSystemMemorySize</th>
<th rowspan="2">NonpagedSystemMemorySize64</th>
<th rowspan="2">PagedMemorySize64</th>
<th rowspan="2">PagedSystemMemorySize</th>
<th rowspan="2">PagedSystemMemorySize64</th>
<th rowspan="2">PeakPagedMemorySize</th>
<th rowspan="2">PeakPagedMemorySize64</th>
<th rowspan="2">PeakWorkingSet</th>
<th rowspan="2">PeakWorkingSet64</th>
<th rowspan="2">PeakVirtualMemorySize</th>
<th rowspan="2">PeakVirtualMemorySize64</th>
<th rowspan="2">PriorityBoostEnabled</th>
<th rowspan="2">PrivateMemorySize64</th>
<th rowspan="2">PrivilegedProcessorTime</th>
<th rowspan="2">ProcessName</th>
<th rowspan="2">ProcessorAffinity</th>
<th rowspan="2">Responding</th>
<th rowspan="2">SessionId</th>
<th rowspan="2">StartInfo</th>
<th rowspan="2">StartTime</th>
<th rowspan="2">SynchronizingObject</th>
<th rowspan="2">Threads</th>
<th rowspan="2">UserProcessorTime</th>
<th rowspan="2">VirtualMemorySize64</th>
<th rowspan="2">EnableRaisingEvents</th>
<th rowspan="2">StandardInput</th>
<th rowspan="2">StandardOutput</th>
<th rowspan="2">StandardError</th>
<th rowspan="2">WorkingSet64</th>
<th rowspan="2">Site</th>
<th rowspan="2">Container</th>
</tr>
<tr><th>Name</th>
<th>Id</th>
<th>PagedMemorySize</th>
<th>PrivateMemorySize</th>
<th>VirtualMemorySize</th>
</tr>
</thead>

Full fiddle showing an issue: https://jsfiddle.net/3z9hymn2/1/

Any way to make it better?