I have a little problem with the tables I am using on my page.

The styles I defined for the `<th>` works in my first table, but in the second one it is not working.

`<th style="width:10px">Number</th>` for the table `employee_grid1` has a `width:10px`.
The same `<th>` in `employee_grid2` is much larger.

```
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="" role="tabpanel" data-example-id="togglable-tabs">
  <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
    <li role="presentation" class="active"><a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">1</a>
    </li>
    <li role="presentation" class=""><a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">2</a>
    </li>
  </ul>
  <div id="myTabContent" class="tab-content">
    <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
      <table id="employee_grid1" class="display" width="100%" cellspacing="0">
        <thead>
          <tr>
            <th style="width:10px">Number</th>
            <th style="width:50px">Name</th>
            <th>Date</th>
            <th style="width:100px"></th>
          </tr>
        </thead>
      </table>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
      <table id="employee_grid2" class="display" width="100%" cellspacing="0">
        <thead>
          <tr>
            <th style="width:10px">Number</th>
            <th style="width:50px">Name</th>
            <th>Date</th>
            <th style="width:100px"></th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

```

Maybe its necessary for the solution. The table is filled with the following javascript:

```
<script type="text/javascript">
  $( document ).ready(function() {
    $('#employee_grid1').DataTable({
      "bprocessing": true,
      "serverSide": true,
      "ajax": {
        "url": "response1.php",
        "type": "POST",
        "error": function(){
          $("#employee_grid_processing").css("display","none");
        }
      },
      "columnDefs": [ 
        { "targets": 3, "render": function ( data, type, full, meta ) { return  '<p>'+data+'</p>'; } }              
      ]                 
    });   
  });
</script>

<script type="text/javascript">
  $( document ).ready(function() {
    $('#employee_grid2').DataTable({
      "bprocessing": true,
      "serverSide": true,
      "ajax": {
        "url": "response2.php",
        "type": "POST",
        "error": function(){
          $("#employee_grid_processing").css("display","none");
        }
      },
      "columnDefs": [ 
        { "targets": 3, "render": function ( data, type, full, meta ) { return  '<p>'+data+'</p>'; } }              
      ]                 
    });   
  });
</script>

```