title: HTML Datatable : Table row is going outside
body: <p>I have data table.
  when I resize it below <strong>860px</strong> then It is going outside table. I have total <strong>8</strong> table header but <strong>8th</strong> header is going outside the table when I resize the window.  </p>
  
  <p><a href="https://i.stack.imgur.com/RTL5b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RTL5b.png" alt="Here is the Image"></a></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;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;div class="panel panel-default"&gt; &lt;div class="row"&gt;&lt;div class="col-sm-12 col-md-12"&gt;&lt;table ui-jq="dataTable"  class="table table-striped b-t b-b dataTable no-footer" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info"&gt;
                      &lt;thead&gt;
                          &lt;tr role="row" class="font-bold text-center no_border"&gt;
                              &lt;th style="width: 150px;" class="sorting_asc no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Rendering engine: activate to sort column descendig" aria-sort="ascending"&gt;Name&lt;/th&gt;
                              &lt;th style="width: 150px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending"&gt;Emai Id&lt;/th&gt;
                              &lt;th style="width: 100px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending"&gt;Seq No&lt;/th&gt;
                              &lt;th style="width: 200px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending"&gt;Ticket Type&lt;/th&gt;
                              &lt;th style="width: 150px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending"&gt;Amount&lt;/th&gt;
                              &lt;th style="width: 50px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending"&gt;Paid&lt;/th&gt;
                              &lt;th style="width: 150px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending"&gt;Order Date&lt;/th&gt;
                              &lt;th style="width: 150px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending"&gt;Payment Order&lt;/th&gt;
                              &lt;!--&lt;th style="width: 120px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending"&gt;Payment&lt;/th&gt;--&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                      &lt;tr role="row" class="odd"&gt;
                          &lt;td class="sorting_1"&gt;
                              &lt;img src="images/image.png" class="img-circle vertical_align_middle" width="35" height="35"&gt;&lt;span class="margin_left_30"&gt;Saumil&lt;/span&gt;
                          &lt;/td&gt;
                          &lt;td&gt;saumil12346678@gmail.com&lt;/td&gt;
                          &lt;td&gt;VGA 1001&lt;/td&gt;
                          &lt;td&gt;Lark - Super Early Bird&lt;/td&gt;
                          &lt;td&gt;INR 1000&lt;/td&gt;
                          &lt;td&gt;YES&lt;/td&gt;
                          &lt;td&gt;30th November 2016&lt;/td&gt;
                          &lt;td&gt;&lt;button type="button" class="btn btn-success"&gt;Refund&lt;/button&gt; &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;/table&gt;&lt;/div&gt;&lt;/div&gt;
                      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is <a href="https://jsfiddle.net/dLmah2r5/" rel="nofollow noreferrer">JSFiddle</a> </p>
  
  <p>Any help would be great.
  Thank You.</p>