title: Resize a table to the size of outter div
body: <p>I created a table within div. The div tag is set style as float left. the table is overflow on the div. How can I do this? Please see below my html.</p>
  
  <p>Sorry. The english is not my mother language. I mean I would like to fit the table within div. If the div will be small, the table and their fonts will be small automatically until the whole table will show within div.</p>
  
  <p><strong>[reformed]</strong></p>
  
  <p>I would like the table and it's content (mostly the font-size) to resize to the outter container. Is this possible ?</p>
  
  <p><strong>[html]</strong>  </p>
  
  <pre><code> &lt;div style="border:1px solid black;width:20%;float:left;margin: 1% 2% 1% 2%; height:30%;"&gt;
       &lt;table style="width:100%"&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td align="center" colspan="7"&gt;&lt;label for=""&gt;1&lt;/label&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Sun&lt;/td&gt;
                  &lt;td&gt;Mon&lt;/td&gt;
                  &lt;td&gt;Thu&lt;/td&gt;
                  &lt;td&gt;Web&lt;/td&gt;
                  &lt;td&gt;Thurs&lt;/td&gt;
                  &lt;td&gt;Fri&lt;/td&gt;
                  &lt;td&gt;Sat&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/n5nEM.png" alt="enter image description here"></p>