title: table inside a div stretches the div horizontally more than 100%
body: <p><img src="https://i.stack.imgur.com/qySia.png" alt="enter image description here">A table has large number of columns (30 columns) and each of the <code>th</code> tags have <code>white-space:nowrap</code> style set on them. This stretches the parent div. How can this be prevented and have a horizontal scroll for the div. ?</p>
  
  <pre><code>&lt;style&gt;
      .monthly_rental_payment_daily th {
          white-space: nowrap;
      }
  
      .monthly_rental_payment_daily td {
          white-space: nowrap;
      }
  &lt;/style&gt;
          &lt;div style="width: 100%;" class="dashboardBox" id="dashboard-monthly-rental-payment"&gt;
  
          &lt;div class="dashboardBoxTitle" id="dashboard-monthly-rental-payment-title"&gt;
              &lt;span&gt;Monthly Rental Payments&lt;/span&gt;
          &lt;/div&gt;
          &lt;div style="height:auto" class="dashboardBoxBody"
               id="dashboard-monthly-rental-payment-body"&gt;
  
          &lt;table
                  class="monthly_rental_payment_daily tablesorter standardTable"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
              &lt;th style="text-align: left;padding-right: 15px"&gt;Location&lt;/th&gt;
  
              &lt;th class="left" style="padding-right: 15px"&gt;Total to be paid&lt;/th&gt;
  
              &lt;th class="left" style="padding-right: 15px"&gt;Total paid to date&lt;/th&gt;
              &lt;th style="padding-right: 15px"&gt;&lt;/th&gt;
  
              &lt;th class="left" style="padding-right: 15px"&gt;Total still to be paid&lt;/th&gt;
              &lt;th style="padding-right: 15px"&gt;&lt;/th&gt;
  
  
              &lt;th class="left" style="padding-right: 15px"&gt;1st - 7th&lt;/th&gt;
              &lt;th style="padding-right: 15px"&gt;&lt;/th&gt;
  
              &lt;th class="left" style="padding-right: 15px"&gt;8th-14th&lt;/th&gt;
              &lt;th style="padding-right: 15px"&gt;&lt;/th&gt;
  
              &lt;th class="left" style="padding-right: 15px"&gt;15th-21st&lt;/th&gt;
              &lt;th style="padding-right: 15px"&gt;&lt;/th&gt;
  
              &lt;th class="left" style="padding-right: 15px"&gt;22nd+&lt;/th&gt;
              &lt;th style="padding-right: 15px"&gt;&lt;/th&gt;
  
  
  
              &lt;th class="left" style="padding-right: 15px"&gt;1st - 7th&lt;/th&gt;
              &lt;th style="padding-right: 15px"&gt;&lt;/th&gt;
  
              &lt;th class="left" style="padding-right: 15px"&gt;8th-14th&lt;/th&gt;
              &lt;th style="padding-right: 15px"&gt;&lt;/th&gt;
  
              &lt;th class="left" style="padding-right: 15px"&gt;15th-21st&lt;/th&gt;
              &lt;th style="padding-right: 15px"&gt;&lt;/th&gt;
  
              &lt;th class="left" style="padding-right: 15px"&gt;22nd+&lt;/th&gt;
              &lt;th style="padding-right: 15px"&gt;&lt;/th&gt;
  
  
              &lt;th class="left" style="padding-right: 15px"&gt;1st - 7th&lt;/th&gt;
              &lt;th style="padding-right: 15px"&gt;&lt;/th&gt;
  
              &lt;th class="left" style="padding-right: 15px"&gt;8th-14th&lt;/th&gt;
              &lt;th style="padding-right: 15px"&gt;&lt;/th&gt;
  
              &lt;th class="left" style="padding-right: 15px"&gt;15th-21st&lt;/th&gt;
              &lt;th style="padding-right: 15px"&gt;&lt;/th&gt;
  
              &lt;th class="left" style="padding-right: 15px"&gt;22nd+&lt;/th&gt;
              &lt;th style="padding-right: 15px"&gt;&lt;/th&gt;
  
          &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;/table&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>