title: Table exceeds size of div because white space
body: <p>I'm having a little problem here. Well, I need to prevent the wrap of elements presents in a table, so I use <code>white-space: nowrap;</code>. And here is the problem. The table is inside a div:</p>
  
  <pre><code>&lt;div class='content'&gt;
      &lt;table&gt;
      &lt;!--Table elements goes here--&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the CSS, I have:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>The problem is if the resolution of the screen is small than the table, the width of the div <code>content</code> is not expanding according to table size, disfiguring the layout.<br>My result is something like:<br>
  <img src="https://i.stack.imgur.com/qrC4B.png" alt="enter image description here"></p>
  
  <p>But it needs to be like this:<br>
  <img src="https://i.stack.imgur.com/N5dwT.png" alt="enter image description here"></p>
  
  <p>Using <code>display: inline-block</code> works, but I can't align the div on center. I apreciate any help, thanks!</p>