title: How to make a large table responsive
body: <p>My tables display fine on desktop, but once I try to view the mobile version my table ends up being too wide for the mobile device screen. I am using a responsive layout.
   How can I set this table to be displayed fine in the mobile
  This is my code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;div class="row clearfix"&gt;
      &lt;div class="col-xs-12"&gt;
          &lt;div class="card"&gt;
              &lt;div class="body"&gt;
                  &lt;div class="table-responsive"&gt;
                      &lt;table id="myTable" class="table table-bordered table-striped table-hover js-basic-example dataTable"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;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;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;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;/tr&gt;
                      &lt;/table&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>