html - table inside a div stretches the div horizontally more than 100% -
a 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
Post a Comment