0

I'm having a little problem here. Well, I need to prevent the wrap of elements presents in a table, so I use white-space: nowrap;. And here is the problem. The table is inside a div:

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

In the CSS, I 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 is if the resolution of the screen is small than the table, the width of the div content is not expanding according to table size, disfiguring the layout.
My result is something like:
enter image description here

But it needs to be like this:
enter image description here

Using display: inline-block works, but I can't align the div on center. I apreciate any help, thanks!

Dyan
  • 303
  • 1
  • 3
  • 14

1 Answers1

0

i think in this case, it's either the no-wrap goes... or you just deal with the content going out of bounds of the screen res. No-wrap is doing it's job and so is your width:100%

Liquidchrome
  • 894
  • 5
  • 10
  • Even if the width is not 100% the table goes out of the div. I need to find a way to prevent this, the div width needs to adapt to the table width. – Dyan Apr 25 '15 at 03:36
  • so then what to do with the cut off content? leave it cut off? – Liquidchrome Apr 25 '15 at 03:40
  • If I remove the `white-space: nowrap;` the problem goes away, but the elements get wraped and I don't want this. – Dyan Apr 25 '15 at 03:49
  • Why don't you make that table background by using table border Example: https://jsfiddle.net/m56sphkn ------
    – Shashank Apr 25 '15 at 03:51
  • looks like there's an answer already on SO. http://stackoverflow.com/questions/7569436/css-constrain-a-table-with-long-cell-contents-to-page-width – Liquidchrome Apr 25 '15 at 03:56