title: Cannot read property 'mData' of undefined when using DataTables with colspan
body: <p>I'm using datatables to display data from the server. Problem is I keep getting an error in the console saying:</p>
  
  <p><code>datatables.min.js:145 Uncaught TypeError: Cannot read property 'mData' of undefined</code></p>
  
  <p>I have visited literally every link on the internet the relates to this, but nothing's worked for me.</p>
  
  <p>I have made sure the number of columns are the same in both thead and tbody using colspans.</p>
  
  <p>I'm probably missing something, but after spending quite some time on it, I'd appreciate some help here.</p>
  
  <p>Here's what the code looks like</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table id="data-table" class="display table" width="100%"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th colspan="4" class="center-align solid-left-border" style="border-bottom: none; text-decoration: underline; text-transform: uppercase; padding: 5px 18px;"&gt;
          Tier 2 Contributions Report
        &lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; font-weight: normal; padding: 5px 18px; font-size: 12.5px"&gt;
          Employer's FIle No/Registration No:
        &lt;/th&gt;
  
        &lt;th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;"&gt;
          &lt;%= company.getSSNITRegistration() || '-' %&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; padding: 5px 18px; font-size: 12.5px;"&gt;
          Name of Employer:
        &lt;/th&gt;
  
        &lt;th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;"&gt;
          &lt;%= company.getName() || '-' %&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; padding: 5px 18px; font-size: 12.5px;"&gt;
          Address of Employer:
        &lt;/th&gt;
  
        &lt;th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;"&gt;
          &lt;%= company.getAddress() || '-' %&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
  
  
      &lt;tr&gt;
        &lt;th colspan="4" style="border-bottom: none;"&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  
    &lt;tfoot&gt;
     &lt;tr&gt;
       &lt;th colspan="2" class="left-align"&gt;Totals&lt;/th&gt;
       &lt;th class="center-align"&gt;&lt;%= addCommas(totals.basicSalary) %&gt;&lt;/th&gt;
       &lt;th class="right-align"&gt;&lt;%= addCommas(totals.contribution) %&gt;&lt;/th&gt;
     &lt;/tr&gt;
    &lt;/tfoot&gt;
  
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;th class="left-align"&gt;Social Sec. No.&lt;/th&gt;
        &lt;th class="left-align"&gt;Full Name&lt;/th&gt;
        &lt;th class="center-align"&gt;Basic Salary&lt;/th&gt;
        &lt;th class="right-align"&gt;Contribution (5%)&lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;% employees.forEach(function(employee) { %&gt;
        &lt;tr&gt;
          &lt;td class="left-align"&gt;&lt;%= employee.ssnitNumber %&gt;&lt;/td&gt;
          &lt;td class="left-align"&gt;&lt;%= employee.lastName + ', ' + employee.firstName + ' ' + employee.otherNames%&gt;&lt;/td&gt;
          &lt;td class="center-align"&gt;&lt;%= addCommas(employee.basicSalary) %&gt;&lt;/td&gt;
          &lt;td class="right-align"&gt;&lt;%= addCommas(employee.contribution) %&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;% }) %&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('#data-table').DataTable( {
    "bPaginate": true,
    "bLengthChange": true,
    "bFilter": true,
    "bSort": false,
    "bInfo": true,
    "bAutoWidth": false,
    "dom": 'Bfrtip',
    "buttons": [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ]
  
  });
  </code></pre>