Возникли проблемы с использованием таблиц данных с Bootstrap вкладками и шириной столбцов

Question

В течение последних нескольких дней я пытался заставить dataTables и Bootstrap вкладки работать так, чтобы ширина столбцов отображалась правильно, используя стили css. Прочитав и попробовав много разных подходов, я наконец-то использовал следующий код. Кажется, есть много способов достичь этого, я делаю это наилучшим образом? Большая проблема, которую я имею, заключается в том, чтобы заголовки столбцов на каждой вкладке расширялись до 100% от контейнера div.

Мой HTML

<div class="tab-content">
  <div class="tab-pane fade active in" id="tab-today">
    <table name="timeline" class="table table-striped table-bordered table-condensed" cellspacing="0" width"100%" id="userTable" >
      <thead>
      <tr class="CenterHeaderRoomData">
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      </thead>
    <tbody class="CurrentBooking-rows">
    </tbody>
    </table>
  </div>

  <div class="tab-pane fade" id="tab-planned">
    <table name="timelineahead" class="table table-striped table-bordered table-condensed" cellspacing="0" width"100%" id="userTableAhead" >
      <thead>
      <tr class="CenterHeaderRoomData">
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      </thead>
     <tbody class="CurrentBooking-rows">
     </tbody>
     </table>
    </div>
</div

Мой Jquery

    // TAB 1
$(document).ready(function(){
  var recordid;
      var imagepathroom = '../../../../conf/conf_images/room/';
      var noimageroomahead = '../images/no-image.png';
      var onimageroomahead = '../images/on_image.png';
      var offimageroomahead = '../images/off_image.png';
      var roomoverrideimage = '../images/room_override_image.png';
  var table = $('#userTable').DataTable( {
    createdRow: function(row, data, dataIndex){
      $('td:eq(0)', row).css('min-width', '150px');
      $('td:eq(3)', row).css('min-width', '150px');
      $('td:eq(5)', row).css('min-width', '20px');
      $('td:eq(6)', row).css('min-width', '20px');
    },
    autoWidth: false,
    order: [[ 1,2,3,4,5,6, "asc" ]],
    paging: false,
    searching: false,
    bInfo : false,
    responsive: true,
    ajax: {
      url: 'get_data.php',
      dataSrc: ''
    },
    language: {
      "emptyTable": "There are no conference bookings for <?php echo $date; ?>"
    },
    columnDefs: [
    {
      "targets": [ 5, 6, 7, 8 ],
      "orderable": false
    },
        {
      targets:[ 1 ],
      className: 'zoom'
    },
    {
      "targets": [5,6,7],
      "className": "text-center"
    },
        ],
    columns: [
   { data: "Column-1",  title: "Column-1", width: '13%'},
   { data: "Column-2", title: "Column-2", width: '10%', render : function (data, type){
     if (data != null) {
       return '<img src="' + imagepathroom + '' +data+'"  />';
     } else {
       return '<img src="' + noimageroom + '" />';
     }
   }
   },
   { data: "Column-3", title:"Column-3", width: '38%'},
   { data: "Column-4", title:"Column-4", width: '12%'},
   { data: "Column-5", title: "Column-5",width: '11%'},
   { data: 'Column-6', title: "Column-6",width: '6%',   render : function (data, type){
     if (data == "1" ){
       return '<img src="' + roomoverrideimage + '" />';
     } else {
       return '';
     }
     }
   },
   { data: 'Column-7', title: "Column-7", width: '6%',   render : function (data, type){
     if (data == 1 ){
       return '<img src="' + offimageroom + '" />';
     } else {
       return '<img src="' + onimageroom + '" />';
     }
    }
   },
   { data: 'RColumn-8', title: "",width: '4%',  render : function (data, type, full, meta) {
     var recordid = full.RecordID;
     return '<input type="button" name="edit" value="View" data-id=' + recordid + ' class="btn btn-conf-view btn-xs edit_data_modal">' }
   },
   { data: 'Column-9',"visible": false },
   ],
   rowCallback: function(row, data, index){
     $('td', row).attr('nowrap','nowrap');
   },
   });
   setInterval( function () {
     table.ajax.reload();
   }, 30000 );

//TAB 2
var recordid;
var imagepathroom = '../../../../conf/conf_images/room/';
var noimageroomahead = '../images/no-image.png';
var onimageroomahead = '../images/on_image.png';
var offimageroomahead = '../images/off_image.png';
var roomoverrideimage = '../images/room_override_image.png';
var table = $('#userTableAhead').DataTable( {
  createdRow: function(row, data, dataIndex){
    $('td:eq(0)', row).css('min-width', '150px');
    $('td:eq(3)', row).css('min-width', '150px');
    $('td:eq(5)', row).css('min-width', '20px');
    $('td:eq(6)', row).css('min-width', '20px');
  },
autoWidth: false,
order: [[ 1,2,3,4,5,6, "asc" ]],
paging: false,
searching: false,
bInfo : false,
ajax: {
  url: 'get_data_ahead.php',
  dataSrc: ''
},
language: {
"emptyTable": "There are no planned conference bookings for <?php echo $date; ?>"
},
columnDefs: [
{
"targets": [ 5, 6, 7 ],
"orderable": false
},
{
targets:[ 1 ],
className: 'zoom'
},
{
"targets": [5,6,7],
"className": "text-center"
},
],
columns: [
{ data: "Colname-1", title:"Colname-1",width: '13%'},
{ data: "Colname-2", title:"", width: '10%', render : function (data, type){
  if (data != null) {
    return '<img src="' + imagepathroom + '' +data+'" class="WayfinderSignageImage" />';
  } else {
    return '<img src="' + noimageroomahead + '" class="WayfinderSignageImage"/>';
  }
}
},
{ data: "Colname-3", title:"Colname-3", width: '38%'},
{ data: "Colname-4", title:"Colname-4",width: '12%'},
{ data: "Colname-5",title:"Colname-5", width: '11%'},

{ data: 'Colname-6', title:"Colname-6",width: '6%',   render : function (data, type){
  if (data == "1" ){
    return '<img src="' + roomoverrideimage + '" class="RoomOverrideOn"/>';
  } else {
    return '';
  }
}
},
{ data: 'Colname-7',title:"Colname-7", width: '6%',   render : function (data, type){
  if (data == 1 ){
    return '<img src="' + offimageroomahead + '" class="wayfinder-on"/>';
  } else {
    return '<img src="' + onimageroomahead + '" class="wayfinder-off"/>';
  }
}
},
{ data: 'Colname-8', title:"",width: '4%', render : function (data, type, full, meta) {
var recordid = full.RecordID;
return '<input type="button" name="edit" value="View" data-id=' + recordid + ' class="btn btn-conf-view btn-xs edit_data_modal">' }
},
],
rowCallback: function(row, data, index){
$('td', row).attr('nowrap','nowrap');
},
});
});

Мой вопрос, есть ли более эффективный способ выполнения той же задачи?