title: Resize table inside overflowing divs without JS
body: <p>Is it possible to resize columns in scrollable table when width of all columns has more pixels than div which contains table. The problem is I have something like 20 columns and I need to have my table scrollable with possibility of resizing columns. I successfully did it with JS mousemove, mouseup and mousedown events but I'm trying to do it with CSS it will cost user less resources. Example below:</p>
  
  <pre><code>&lt;div style="overflow-x:scroll;overflow-y:scroll;max-height:300px;max-width:500px;background-color:gray;"&gt;
    &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
            &lt;th style="resize:horizontal;overflow: auto;"&gt;TESTTESTESTEST&lt;/th&gt;
            &lt;th style="resize:horizontal;overflow: auto;"&gt;TESTTESTESTEST&lt;/th&gt;
            &lt;th style="resize:horizontal;overflow: auto;"&gt;TESTTESTESTEST&lt;/th&gt;
            &lt;th style="resize:horizontal;overflow: auto;"&gt;TESTTESTESTEST&lt;/th&gt;
            &lt;th style="resize:horizontal;overflow: auto;"&gt;TESTTESTESTEST&lt;/th&gt;
            &lt;th style="resize:horizontal;overflow: auto;"&gt;TESTTESTESTEST&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;TESTTESTESTESTESTSTETSET&lt;/td&gt;
          &lt;td&gt;TESTTESTESTESTESTSTETSET&lt;/td&gt;
          &lt;td&gt;TESTTESTESTESTESTSTETSET&lt;/td&gt;
          &lt;td&gt;TESTTESTESTESTESTSTETSET&lt;/td&gt;
          &lt;td&gt;TESTTESTESTESTESTSTETSET&lt;/td&gt;
          &lt;td&gt;TESTTESTESTESTESTSTETSET&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>