title: Horizontal Scroll dataTables.js
body: <p>I am having difficulty getting the horizontal scroll to work with dataTables.js. The expected result is a table that allows me to scroll horizontally within the table. The current result is a table that extends outside of the container div. Any solutions?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="box-body table-responsive"&gt;
       &lt;table id="portal-drivers" class="table table-bordered table-striped" cellspacing="0" width="100%"&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;Email&lt;/th&gt;
                   &lt;th&gt;Number&lt;/th&gt;
                   &lt;th&gt;Rating&lt;/th&gt;
                   &lt;th&gt;Transactions&lt;/th&gt;
               &lt;/tr&gt;
           &lt;/thead&gt;
           &lt;tbody&gt;
               &lt;tr&gt;
                   &lt;td&gt;Bugs&lt;/td&gt;
                   &lt;td&gt;Bunny&lt;/td&gt;
                   &lt;td&gt;bugs@tunesquad.com&lt;/td&gt;
                   &lt;td&gt;(310) 530-6789&lt;/td&gt;
                   &lt;td&gt;4.8&lt;/td&gt;
                   &lt;td&gt;309239045293459823945234895&lt;/td&gt;
               &lt;/tr&gt;
            &lt;/tbody&gt;                   
       &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.table-striped &gt; tbody &gt; tr:nth-child(odd) &gt; td, 
  .table-striped &gt; tbody &gt; tr:nth-child(odd) &gt; th {
    white-space: nowrap;
  }
  #portal-drivers {
    overflow: auto;
  }
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>$("#portal-drivers").dataTable( {
      "scrollX": true
  } );
  </code></pre>