title: JQuery data table with multiple header rows and fixed column
body: <p>My html table contain two header rows as below. I want to make quarter column fixed I tried an example in jquery datatable plugin but it is not working as I expexted. The table is convered to a datatable but first column is not fixed</p>
  
  <p><strong>Example i tried</strong> <a href="https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html" rel="nofollow noreferrer">https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table id="example" class="table table-stripped"&gt;
     &lt;thead&gt;
        &lt;tr&gt;
           &lt;th rowspan="2"&gt;Quarter&lt;/th&gt;
           &lt;th colspan="10"&gt;ICT Sector&lt;/th&gt;
           &lt;th colspan="10"&gt;Shipping&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;th&gt;WSO2&lt;/th&gt;
           &lt;th&gt;IFS&lt;/th&gt;
           &lt;th&gt;Company A&lt;/th&gt;
           &lt;th&gt;Company B&lt;/th&gt;
           &lt;th&gt;Company C&lt;/th&gt;
           &lt;th&gt;Company D&lt;/th&gt;
           &lt;th&gt;Company E&lt;/th&gt;
           &lt;th&gt;Company F&lt;/th&gt;
           &lt;th&gt;Company G&lt;/th&gt;
           &lt;th&gt;Company H&lt;/th&gt;
           &lt;th&gt;PSA&lt;/th&gt;
           &lt;th&gt;Mercantile Shipping&lt;/th&gt;
           &lt;th&gt;Company A&lt;/th&gt;
           &lt;th&gt;Company B&lt;/th&gt;
           &lt;th&gt;Company C&lt;/th&gt;
           &lt;th&gt;Company D&lt;/th&gt;
           &lt;th&gt;Company E&lt;/th&gt;
           &lt;th&gt;Company F&lt;/th&gt;
           &lt;th&gt;Company G&lt;/th&gt;
           &lt;th&gt;Company H&lt;/th&gt;
        &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;td&gt;Quater 1&lt;/td&gt;
           &lt;td&gt;100&lt;/td&gt;
           &lt;td&gt;700&lt;/td&gt;
           &lt;td&gt;800&lt;/td&gt;
           &lt;td&gt;900&lt;/td&gt;
           &lt;td&gt;1100&lt;/td&gt;
           &lt;td&gt;2200&lt;/td&gt;
           &lt;td&gt;7821&lt;/td&gt;
           &lt;td&gt;8862&lt;/td&gt;
           &lt;td&gt;6231&lt;/td&gt;
           &lt;td&gt;5891&lt;/td&gt;
           &lt;td&gt;100&lt;/td&gt;
           &lt;td&gt;700&lt;/td&gt;
           &lt;td&gt;800&lt;/td&gt;
           &lt;td&gt;900&lt;/td&gt;
           &lt;td&gt;1100&lt;/td&gt;
           &lt;td&gt;2200&lt;/td&gt;
           &lt;td&gt;7821&lt;/td&gt;
           &lt;td&gt;8862&lt;/td&gt;
           &lt;td&gt;6231&lt;/td&gt;
           &lt;td&gt;5891&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;Quater 1&lt;/td&gt;
           &lt;td&gt;100&lt;/td&gt;
           &lt;td&gt;700&lt;/td&gt;
           &lt;td&gt;800&lt;/td&gt;
           &lt;td&gt;900&lt;/td&gt;
           &lt;td&gt;1100&lt;/td&gt;
           &lt;td&gt;2200&lt;/td&gt;
           &lt;td&gt;7821&lt;/td&gt;
           &lt;td&gt;8862&lt;/td&gt;
           &lt;td&gt;6231&lt;/td&gt;
           &lt;td&gt;5891&lt;/td&gt;
           &lt;td&gt;100&lt;/td&gt;
           &lt;td&gt;700&lt;/td&gt;
           &lt;td&gt;800&lt;/td&gt;
           &lt;td&gt;900&lt;/td&gt;
           &lt;td&gt;1100&lt;/td&gt;
           &lt;td&gt;2200&lt;/td&gt;
           &lt;td&gt;7821&lt;/td&gt;
           &lt;td&gt;8862&lt;/td&gt;
           &lt;td&gt;6231&lt;/td&gt;
           &lt;td&gt;5891&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/QK6av.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QK6av.png" alt="table output"></a></p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(document).ready(function() {
      var table = $('#example').DataTable( {
          scrollY:        "300px",
          scrollX:        true,
          scrollCollapse: true,
          paging:         false,
          fixedColumns:   {
              leftColumns: 1
  
          }
      } );
  } );
  </code></pre>