title: datatable is not being responsive
body: <p>I have created two tables both are same. I am also using the responsive feature of the datatable for making it responsive. I display one table at a time and show and hide them on basis of two radio buttons which i created. The issue is that whenever i switch between the tables if one is responsive then the other is not.
  The table images
  <a href="https://i.stack.imgur.com/C1p34.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C1p34.png" alt="Table one"></a>
  When i click on radio button to change the table 2 is not showing that '+' button when you change the size of browser table 2 gets responsive but when you switch table again then you find that table 1 is not responsive with '+' button missing.
  <a href="https://i.stack.imgur.com/GPrvC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GPrvC.png" alt="Table two"></a></p>
  
  <p>Here is the head and to change between tables script</p>
  
  <pre><code>&lt;link data-require="datatables@1.10.12" data-semver="1.10.12" rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" /&gt;
  &lt;link rel="stylesheet" type ="text/css" href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.dataTables.min.css" /&gt;
  &lt;script src="Scripts/jquery-3.3.1.js"&gt;&lt;/script&gt;
  &lt;script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"&gt;&lt;/script&gt;
  &lt;script data-require="datatables@1.10.12" data-semver="1.10.12" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script data-require="datatables-responsive@*" data-semver="2.1.0" src="//cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js"&gt;
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#example').DataTable({
  
  
              responsive: true
  
  
          });
          $('#example1').DataTable({
  
  
              responsive: true
  
  
          });
          iniTable();
          $.ajaxSetup({ cache: false });            
  
          $("input[name='DeviceType']").change(function () {
              var rbVal = $('input[name=DeviceType]:checked').val();
              $("#Loader").show().delay(5000).fadeOut();
              if (rbVal == "PID") {
  
                  $("#example").hide(500);
                  $("#example1").show(500);
              }
              else {
  
                  $("#example1").hide(500);
                  $("#example").show(500);
  
              }
          });
      });
  
      function iniTable() {
          var $radios = $('input:radio[name=DeviceType]');
          if ($radios.is(':checked') === false) {
              $radios.filter('[value=PID]').prop('checked', true);
          }
      }
  
  
      $(".close").on("click", function () {
          $(this).closest('.panel-collapse').collapse('hide');
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the body</p>
  
  <pre><code> &lt;div id="radiobtn"&gt;
      &lt;div style="margin-top:6px;"&gt;
          &lt;label class="control-label"&gt;
              Device Type
          &lt;/label&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div class="input-group"&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;input name="DeviceType" type="radio" id="rbTypeCID" class="form-controlnoborder radio-inline" style="border: none;" value="CID"&gt;
              &lt;/span&gt;
              &lt;label class="form-control"&gt;CID&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div class="input-group"&gt;
              &lt;span class="input-group-addon"&gt;
                  &lt;input name="DeviceType" type="radio" id="rbTypePID" class="form-controlnoborder radio-inline" style="border: none;" value="PID" checked="checked"&gt;
              &lt;/span&gt;
              &lt;label class="form-control"&gt;PID&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;table id="example" class="display nowrap" style="display:none; width:100%" cellspacing="0"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;First name&lt;/th&gt;
              &lt;th&gt;Last name&lt;/th&gt;
              &lt;th&gt;Position&lt;/th&gt;
              &lt;th&gt;Office&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Start date&lt;/th&gt;
              &lt;th&gt;Salary&lt;/th&gt;
              &lt;th&gt;Extn.&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;th&gt;First name&lt;/th&gt;
              &lt;th&gt;Last name&lt;/th&gt;
              &lt;th&gt;Position&lt;/th&gt;
              &lt;th&gt;Office&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Start date&lt;/th&gt;
              &lt;th&gt;Salary&lt;/th&gt;
              &lt;th&gt;Extn.&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/tfoot&gt;
      &lt;tbody&gt;           
          &lt;tr&gt;
  
              &lt;td&gt;Vivian&lt;/td&gt;
              &lt;td&gt;Harrell&lt;/td&gt;
              &lt;td&gt;Financial Controller&lt;/td&gt;
              &lt;td&gt;San Francisco&lt;/td&gt;
              &lt;td&gt;62&lt;/td&gt;
              &lt;td&gt;2009/02/14&lt;/td&gt;
              &lt;td&gt;$452,500&lt;/td&gt;
              &lt;td&gt;9422&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Timothy&lt;/td&gt;
              &lt;td&gt;Mooney&lt;/td&gt;
              &lt;td&gt;Office Manager&lt;/td&gt;
              &lt;td&gt;London&lt;/td&gt;
              &lt;td&gt;37&lt;/td&gt;
              &lt;td&gt;2008/12/11&lt;/td&gt;
              &lt;td&gt;$136,200&lt;/td&gt;
              &lt;td&gt;7580&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Jackson&lt;/td&gt;
              &lt;td&gt;Bradshaw&lt;/td&gt;
              &lt;td&gt;Director&lt;/td&gt;
              &lt;td&gt;New York&lt;/td&gt;
              &lt;td&gt;65&lt;/td&gt;
              &lt;td&gt;2008/09/26&lt;/td&gt;
              &lt;td&gt;$645,750&lt;/td&gt;
              &lt;td&gt;1042&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Olivia&lt;/td&gt;
              &lt;td&gt;Liang&lt;/td&gt;
              &lt;td&gt;Support Engineer&lt;/td&gt;
              &lt;td&gt;Singapore&lt;/td&gt;
              &lt;td&gt;64&lt;/td&gt;
              &lt;td&gt;2011/02/03&lt;/td&gt;
              &lt;td&gt;$234,500&lt;/td&gt;
              &lt;td&gt;2120&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Bruno&lt;/td&gt;
              &lt;td&gt;Nash&lt;/td&gt;
              &lt;td&gt;Software Engineer&lt;/td&gt;
              &lt;td&gt;London&lt;/td&gt;
              &lt;td&gt;38&lt;/td&gt;
              &lt;td&gt;2011/05/03&lt;/td&gt;
              &lt;td&gt;$163,500&lt;/td&gt;
              &lt;td&gt;6222&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Sakura&lt;/td&gt;
              &lt;td&gt;Yamamoto&lt;/td&gt;
              &lt;td&gt;Support Engineer&lt;/td&gt;
              &lt;td&gt;Tokyo&lt;/td&gt;
              &lt;td&gt;37&lt;/td&gt;
              &lt;td&gt;2009/08/19&lt;/td&gt;
              &lt;td&gt;$139,575&lt;/td&gt;
              &lt;td&gt;9383&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Thor&lt;/td&gt;
              &lt;td&gt;Walton&lt;/td&gt;
              &lt;td&gt;Developer&lt;/td&gt;
              &lt;td&gt;New York&lt;/td&gt;
              &lt;td&gt;61&lt;/td&gt;
              &lt;td&gt;2013/08/11&lt;/td&gt;
              &lt;td&gt;$98,540&lt;/td&gt;
              &lt;td&gt;8327&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Finn&lt;/td&gt;
              &lt;td&gt;Camacho&lt;/td&gt;
              &lt;td&gt;Support Engineer&lt;/td&gt;
              &lt;td&gt;San Francisco&lt;/td&gt;
              &lt;td&gt;47&lt;/td&gt;
              &lt;td&gt;2009/07/07&lt;/td&gt;
              &lt;td&gt;$87,500&lt;/td&gt;
              &lt;td&gt;2927&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Serge&lt;/td&gt;
              &lt;td&gt;Baldwin&lt;/td&gt;
              &lt;td&gt;Data Coordinator&lt;/td&gt;
              &lt;td&gt;Singapore&lt;/td&gt;
              &lt;td&gt;64&lt;/td&gt;
              &lt;td&gt;2012/04/09&lt;/td&gt;
              &lt;td&gt;$138,575&lt;/td&gt;
              &lt;td&gt;8352&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Zenaida&lt;/td&gt;
              &lt;td&gt;Frank&lt;/td&gt;
              &lt;td&gt;Software Engineer&lt;/td&gt;
              &lt;td&gt;New York&lt;/td&gt;
              &lt;td&gt;63&lt;/td&gt;
              &lt;td&gt;2010/01/04&lt;/td&gt;
              &lt;td&gt;$125,250&lt;/td&gt;
              &lt;td&gt;7439&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Zorita&lt;/td&gt;
              &lt;td&gt;Serrano&lt;/td&gt;
              &lt;td&gt;Software Engineer&lt;/td&gt;
              &lt;td&gt;San Francisco&lt;/td&gt;
              &lt;td&gt;56&lt;/td&gt;
              &lt;td&gt;2012/06/01&lt;/td&gt;
              &lt;td&gt;$115,000&lt;/td&gt;
              &lt;td&gt;4389&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Jennifer&lt;/td&gt;
              &lt;td&gt;Acosta&lt;/td&gt;
              &lt;td&gt;Junior Javascript Developer&lt;/td&gt;
              &lt;td&gt;Edinburgh&lt;/td&gt;
              &lt;td&gt;43&lt;/td&gt;
              &lt;td&gt;2013/02/01&lt;/td&gt;
              &lt;td&gt;$75,650&lt;/td&gt;
              &lt;td&gt;3431&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Cara&lt;/td&gt;
              &lt;td&gt;Stevens&lt;/td&gt;
              &lt;td&gt;Sales Assistant&lt;/td&gt;
              &lt;td&gt;New York&lt;/td&gt;
              &lt;td&gt;46&lt;/td&gt;
              &lt;td&gt;2011/12/06&lt;/td&gt;
              &lt;td&gt;$145,600&lt;/td&gt;
              &lt;td&gt;3990&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Hermione&lt;/td&gt;
              &lt;td&gt;Butler&lt;/td&gt;
              &lt;td&gt;Regional Director&lt;/td&gt;
              &lt;td&gt;London&lt;/td&gt;
              &lt;td&gt;47&lt;/td&gt;
              &lt;td&gt;2011/03/21&lt;/td&gt;
              &lt;td&gt;$356,250&lt;/td&gt;
              &lt;td&gt;1016&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Lael&lt;/td&gt;
              &lt;td&gt;Greer&lt;/td&gt;
              &lt;td&gt;Systems Administrator&lt;/td&gt;
              &lt;td&gt;London&lt;/td&gt;
              &lt;td&gt;21&lt;/td&gt;
              &lt;td&gt;2009/02/27&lt;/td&gt;
              &lt;td&gt;$103,500&lt;/td&gt;
              &lt;td&gt;6733&lt;/td&gt;
          &lt;/tr&gt;            
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is table 2 It is same just different id</p>
  
  <pre><code>&lt;table id="example1" class="display nowrap" style="width:100%" cellspacing="0"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;First name&lt;/th&gt;
              &lt;th&gt;Last name&lt;/th&gt;
              &lt;th&gt;Position&lt;/th&gt;
              &lt;th&gt;Office&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Start date&lt;/th&gt;
              &lt;th&gt;Salary&lt;/th&gt;
              &lt;th&gt;Extn.&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;th&gt;First name&lt;/th&gt;
              &lt;th&gt;Last name&lt;/th&gt;
              &lt;th&gt;Position&lt;/th&gt;
              &lt;th&gt;Office&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Start date&lt;/th&gt;
              &lt;th&gt;Salary&lt;/th&gt;
              &lt;th&gt;Extn.&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/tfoot&gt;
      &lt;tbody&gt;           
          &lt;tr&gt;
  
              &lt;td&gt;Hope&lt;/td&gt;
              &lt;td&gt;Fuentes&lt;/td&gt;
              &lt;td&gt;Secretary&lt;/td&gt;
              &lt;td&gt;San Francisco&lt;/td&gt;
              &lt;td&gt;41&lt;/td&gt;
              &lt;td&gt;2010/02/12&lt;/td&gt;
              &lt;td&gt;$109,850&lt;/td&gt;
              &lt;td&gt;6318&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Vivian&lt;/td&gt;
              &lt;td&gt;Harrell&lt;/td&gt;
              &lt;td&gt;Financial Controller&lt;/td&gt;
              &lt;td&gt;San Francisco&lt;/td&gt;
              &lt;td&gt;62&lt;/td&gt;
              &lt;td&gt;2009/02/14&lt;/td&gt;
              &lt;td&gt;$452,500&lt;/td&gt;
              &lt;td&gt;9422&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Timothy&lt;/td&gt;
              &lt;td&gt;Mooney&lt;/td&gt;
              &lt;td&gt;Office Manager&lt;/td&gt;
              &lt;td&gt;London&lt;/td&gt;
              &lt;td&gt;37&lt;/td&gt;
              &lt;td&gt;2008/12/11&lt;/td&gt;
              &lt;td&gt;$136,200&lt;/td&gt;
              &lt;td&gt;7580&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Jackson&lt;/td&gt;
              &lt;td&gt;Bradshaw&lt;/td&gt;
              &lt;td&gt;Director&lt;/td&gt;
              &lt;td&gt;New York&lt;/td&gt;
              &lt;td&gt;65&lt;/td&gt;
              &lt;td&gt;2008/09/26&lt;/td&gt;
              &lt;td&gt;$645,750&lt;/td&gt;
              &lt;td&gt;1042&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Olivia&lt;/td&gt;
              &lt;td&gt;Liang&lt;/td&gt;
              &lt;td&gt;Support Engineer&lt;/td&gt;
              &lt;td&gt;Singapore&lt;/td&gt;
              &lt;td&gt;64&lt;/td&gt;
              &lt;td&gt;2011/02/03&lt;/td&gt;
              &lt;td&gt;$234,500&lt;/td&gt;
              &lt;td&gt;2120&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Bruno&lt;/td&gt;
              &lt;td&gt;Nash&lt;/td&gt;
              &lt;td&gt;Software Engineer&lt;/td&gt;
              &lt;td&gt;London&lt;/td&gt;
              &lt;td&gt;38&lt;/td&gt;
              &lt;td&gt;2011/05/03&lt;/td&gt;
              &lt;td&gt;$163,500&lt;/td&gt;
              &lt;td&gt;6222&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Sakura&lt;/td&gt;
              &lt;td&gt;Yamamoto&lt;/td&gt;
              &lt;td&gt;Support Engineer&lt;/td&gt;
              &lt;td&gt;Tokyo&lt;/td&gt;
              &lt;td&gt;37&lt;/td&gt;
              &lt;td&gt;2009/08/19&lt;/td&gt;
              &lt;td&gt;$139,575&lt;/td&gt;
              &lt;td&gt;9383&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Thor&lt;/td&gt;
              &lt;td&gt;Walton&lt;/td&gt;
              &lt;td&gt;Developer&lt;/td&gt;
              &lt;td&gt;New York&lt;/td&gt;
              &lt;td&gt;61&lt;/td&gt;
              &lt;td&gt;2013/08/11&lt;/td&gt;
              &lt;td&gt;$98,540&lt;/td&gt;
              &lt;td&gt;8327&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Finn&lt;/td&gt;
              &lt;td&gt;Camacho&lt;/td&gt;
              &lt;td&gt;Support Engineer&lt;/td&gt;
              &lt;td&gt;San Francisco&lt;/td&gt;
              &lt;td&gt;47&lt;/td&gt;
              &lt;td&gt;2009/07/07&lt;/td&gt;
              &lt;td&gt;$87,500&lt;/td&gt;
              &lt;td&gt;2927&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Serge&lt;/td&gt;
              &lt;td&gt;Baldwin&lt;/td&gt;
              &lt;td&gt;Data Coordinator&lt;/td&gt;
              &lt;td&gt;Singapore&lt;/td&gt;
              &lt;td&gt;64&lt;/td&gt;
              &lt;td&gt;2012/04/09&lt;/td&gt;
              &lt;td&gt;$138,575&lt;/td&gt;
              &lt;td&gt;8352&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Zenaida&lt;/td&gt;
              &lt;td&gt;Frank&lt;/td&gt;
              &lt;td&gt;Software Engineer&lt;/td&gt;
              &lt;td&gt;New York&lt;/td&gt;
              &lt;td&gt;63&lt;/td&gt;
              &lt;td&gt;2010/01/04&lt;/td&gt;
              &lt;td&gt;$125,250&lt;/td&gt;
              &lt;td&gt;7439&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Zorita&lt;/td&gt;
              &lt;td&gt;Serrano&lt;/td&gt;
              &lt;td&gt;Software Engineer&lt;/td&gt;
              &lt;td&gt;San Francisco&lt;/td&gt;
              &lt;td&gt;56&lt;/td&gt;
              &lt;td&gt;2012/06/01&lt;/td&gt;
              &lt;td&gt;$115,000&lt;/td&gt;
              &lt;td&gt;4389&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Jennifer&lt;/td&gt;
              &lt;td&gt;Acosta&lt;/td&gt;
              &lt;td&gt;Junior Javascript Developer&lt;/td&gt;
              &lt;td&gt;Edinburgh&lt;/td&gt;
              &lt;td&gt;43&lt;/td&gt;
              &lt;td&gt;2013/02/01&lt;/td&gt;
              &lt;td&gt;$75,650&lt;/td&gt;
              &lt;td&gt;3431&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Cara&lt;/td&gt;
              &lt;td&gt;Stevens&lt;/td&gt;
              &lt;td&gt;Sales Assistant&lt;/td&gt;
              &lt;td&gt;New York&lt;/td&gt;
              &lt;td&gt;46&lt;/td&gt;
              &lt;td&gt;2011/12/06&lt;/td&gt;
              &lt;td&gt;$145,600&lt;/td&gt;
              &lt;td&gt;3990&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
  
              &lt;td&gt;Hermione&lt;/td&gt;
              &lt;td&gt;Butler&lt;/td&gt;
              &lt;td&gt;Regional Director&lt;/td&gt;
              &lt;td&gt;London&lt;/td&gt;
              &lt;td&gt;47&lt;/td&gt;
              &lt;td&gt;2011/03/21&lt;/td&gt;
              &lt;td&gt;$356,250&lt;/td&gt;
              &lt;td&gt;1016&lt;/td&gt;
          &lt;/tr&gt;            
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I just followed suggestion by @finw3 to use </p>
  
  <pre><code>$('#example1').DataTable().collapse.adjust(); 
  </code></pre>
  
  <p>It is working but table is getting resize, the column 1 occupies the whole browser <a href="https://i.stack.imgur.com/mYfEJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mYfEJ.png" alt="Table one"></a></p>