Format your HTML properly with <tr>...</tr> around <th>..</th> (& end <th> properly as shown) & add <thead>..</thead> around head & <tbody>...</tbody> around body and add code to auto add missing <td></td>:

$(document).ready(function() {
    // Add missing <td></td> according to number of columns found in head
    var numTd = $('th').length;
    console.log('Number of columns found in head =: ', numTd);
    $('tbody tr').each(function()
    {
        var i = $(this).find('td').length;
        while(i < numTd)
        {
            $(this).append('<td></td>');
            i++;
        }
    });
    
    $('.tree').DataTable();
} );

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>

<table class="tree display responsive no-wrap">
  <thead>
    <tr>
    <th>name</th>
    <th>class</th>
    <th>Remark</th>
    <th>xyz</th>
    <th>zyz</th>
    <th>zyz</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigThing</td>
    <td>somethigvalue</td>
   <td>somethigThing</td>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
    <tr>
    <td>somethigThing</td>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    <td>somethigThing</td>
    <td>somethigThing</td>
    <td>somethigvalue</td>
    </tr>
  </tbody>
</table>

You are loading the data inside the paragraph, which is not what you want to do. Also the paragraph shouldn't be there. You can add an id to tbody and then just extend its innerHTML like so: https://jsfiddle.net/14pt76wp/.

Why are you using native functions? bootstrap has jQuery included. You could do something like:

$('table tbody').append(tablecontents);

Another trick:

1. Iterate over the array and do
   employee[i] = '<td>' + employee[i].join('</td><td>') + '</td>';
2. tablecontents = '<tr>' + employee.join('</tr><tr>') + '</tr>';