html - table inside a div stretches the div horizontally more than 100% -


enter image description herea table has large number of columns (30 columns) , each of th tags have white-space:nowrap style set on them. stretches parent div. how can prevented , have horizontal scroll div. ?

<style>     .monthly_rental_payment_daily th {         white-space: nowrap;     }      .monthly_rental_payment_daily td {         white-space: nowrap;     } </style>         <div style="width: 100%;" class="dashboardbox" id="dashboard-monthly-rental-payment">          <div class="dashboardboxtitle" id="dashboard-monthly-rental-payment-title">             <span>monthly rental payments</span>         </div>         <div style="height:auto" class="dashboardboxbody"              id="dashboard-monthly-rental-payment-body">          <table                 class="monthly_rental_payment_daily tablesorter standardtable">         <thead>         <tr>             <th style="text-align: left;padding-right: 15px">location</th>              <th class="left" style="padding-right: 15px">total paid</th>              <th class="left" style="padding-right: 15px">total paid date</th>             <th style="padding-right: 15px"></th>              <th class="left" style="padding-right: 15px">total still paid</th>             <th style="padding-right: 15px"></th>               <th class="left" style="padding-right: 15px">1st - 7th</th>             <th style="padding-right: 15px"></th>              <th class="left" style="padding-right: 15px">8th-14th</th>             <th style="padding-right: 15px"></th>              <th class="left" style="padding-right: 15px">15th-21st</th>             <th style="padding-right: 15px"></th>              <th class="left" style="padding-right: 15px">22nd+</th>             <th style="padding-right: 15px"></th>                <th class="left" style="padding-right: 15px">1st - 7th</th>             <th style="padding-right: 15px"></th>              <th class="left" style="padding-right: 15px">8th-14th</th>             <th style="padding-right: 15px"></th>              <th class="left" style="padding-right: 15px">15th-21st</th>             <th style="padding-right: 15px"></th>              <th class="left" style="padding-right: 15px">22nd+</th>             <th style="padding-right: 15px"></th>               <th class="left" style="padding-right: 15px">1st - 7th</th>             <th style="padding-right: 15px"></th>              <th class="left" style="padding-right: 15px">8th-14th</th>             <th style="padding-right: 15px"></th>              <th class="left" style="padding-right: 15px">15th-21st</th>             <th style="padding-right: 15px"></th>              <th class="left" style="padding-right: 15px">22nd+</th>             <th style="padding-right: 15px"></th>          </tr>         </thead>     </table>     </div>     </div> 

without seeing code, can guess. try set width on div , set overflow-x scroll.


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -