DataTables.net с rowspan / colspan не работает должным образом для больших таблиц

Question

Я работаю с DataTables.net . Работает отлично. Я хотел добавить colspan / rowspan для заголовка, и он, кажется, работает нормально для таблиц с небольшим количеством столбцов (хотя при изменении размера это выглядит не так хорошо). Однако при добавлении все большего и большего количества столбцов все начинает выглядеть очень плохо, даже если видимые столбцы действительно не изменились.

На изображении ниже показана проблема. 1-я таблица имеет те же начальные столбцы, но затем 2-я таблица добавляет их намного больше. Даже если одни и те же видимые данные на экране выглядят совершенно иначе.

Таблица 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>

Таблица 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>

Полная скрипка, показывающая проблему: https://jsfiddle.net/3z9hymn2/1/