css - Table exceeds size of div because white space -


i'm having little problem here. well, need prevent wrap of elements presents in table, use white-space: nowrap;. , here problem. table inside div:

<div class='content'>     <table>     <!--table elements goes here-->     </table> </div> 

in css, have:

div.content {     background-color: #e6ebf2;     padding: 20px; } table {     width: 100%;     margin-top: 20px;     border-collapse: collapse;     border-spacing:0;     background-color: white;     white-space: nowrap; } th, td  {     font-family: arial, sans-serif;     font-size: 16px;     padding: 10px;     border-style: solid;     border-width: 1px;     border-color: #d6cece;     overflow: hidden; } 

the problem if resolution of screen small table, width of div content not expanding according table size, disfiguring layout.
my result like:
enter image description here

but needs this:
enter image description here

using display: inline-block works, can't align div on center. apreciate help, thanks!

i think in case, it's either no-wrap goes... or deal content going out of bounds of screen res. no-wrap doing it's job , width:100%


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -