title: Resizable div with overflow
body: <p>This question may look stupid for some. My apologies, I am not that savy with CSS.</p>
  
  <p>Now, I have a table with 2 columns (needs to be equal). The table width is put to 100% and needs to be resized with the page. </p>
  
  <p>The header, it's ok. It only contains 2 cells with 2-3 words, so there are no problems. </p>
  
  <p>Now, each of the following cells contain quite some big text and I need to be displayed as it is (no wrapping). </p>
  
  <p>What I did:</p>
  
  <pre><code>&lt;style&gt;
  .contentDiv
  {
          display: inline-block;
          overflow-x:auto;
          overflow-y:hidden;
          white-space: nowrap;
          white-space: nowrap;
  }
  &lt;/style&gt;
  
  &lt;table style="width:100%"&gt;
    &lt;th&gt;
      &lt;tr&gt;&lt;td with="50%"&gt;head 1&lt;/td&gt;&lt;td width="50%"&gt;head 2&lt;/td&gt;&lt;/tr&gt;
    &lt;/th&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;div class="contentDiv"&gt;big-text-here&lt;/div&gt;&lt;/td&gt;
        &lt;td&gt;&lt;div class="contentDiv"&gt;big-text-here&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;  
  </code></pre>
  
  <p>The bottom line is I want the table to have the full width, the inner content-cell to have half of the table width and the text (no matter how big it is) not to alter the layout (scrollbars should appear if the content is bigger than the required surface). </p>
  
  <p>Thanks!</p>