DataTable Bug

by survivant

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<table width="100%" cellspacing="0" class="display dataTable no-footer" id="example" role="grid" aria-describedby="example_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 84px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">Name</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 124px;" aria-label="Position: activate to sort column ascending">Position</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 62px;" aria-label="Office: activate to sort column ascending">Office</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 37px;" aria-label="Extn.: activate to sort column ascending">Extn.</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 63px;" aria-label="Start date: activate to sort column ascending">Start date</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 56px;" aria-label="Salary: activate to sort column ascending">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td class="sorting_1">Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>5407</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">Angelica Ramos</td>
      <td>Chief Executive Officer (CEO)</td>
      <td>London</td>
      <td>5797</td>
      <td>2009/10/09</td>
      <td>$1,200,000</td>
    </tr>
    <tr...

CSS

.nestedtable {
  width:100%;
  background: red;
  padding: 0;
  cellspacing: 0;
}

table.dataTable tbody td.nestedtable {
  width:100%;
  background: green;
  padding: 0;
  cellspacing: 0;
  display: table-cell;
    vertical-align: inherit;
}
table.dataTable tbody td.nestedtable td {
  background: green;
  //padding: 0;
  //cellspacing: 0;
}
.nestedtable table {
  width:100%;
  background: blue;
  padding: 0;
  cellspacing: 0;
  
}

JavaScript

$(document).ready(function() {
  //'tbody > tr:first:parent tr
  $('#example').on('click', 'tbody > tr', function(e) {
    console.log(this);
    //do something with row in master table
  });
  
 var arrOfTable1=[],
 i=0;

$('#example td').each(function() {
 mWid = $(this).width(); 
 arrOfTable1.push(mWid);
});

console.log(arrOfTable1);

$('#patate td').each(function() {
$(this).css("width", arrOfTable1[i]+"px");
 //$(this).css("min-width",arrOfTable1[i]+"px");
    console.log($(this).css('min-width'));
 i++; 
});
});