Reducing font size in table so the table fits inside a div
<p>I have a fixed width div that has a table that is wider than the div.
What i wish to do is shrink the table text so it fits inside the div.</p>

<p>setting the width as a percentage as per <a href="http://stackoverflow.com/questions/2124351/set-width-in-percentage-using-jquery">This Page</a> Setting table width to 100% isn't working. </p>

<p>The following code will work but how do i automate it ie calculate FontSize?</p>

<pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
     &lt;link rel="stylesheet" href=/themes/base/jquery.ui.all.css"&gt;
     &lt;script src="/jquery-1.7.1.js"&gt;&lt;/script&gt;    
    &lt;script src="/ui/jquery.ui.core.js"&gt;&lt;/script&gt;    
    &lt;script src="/ui/jquery.ui.widget.js"&gt;&lt;/script&gt;    
    &lt;script src="/ui/jquery.ui.mouse.js"&gt;&lt;/script&gt;    
&lt;script src="/ui/jquery.ui.resizable.js"&gt;&lt;/script&gt;    
&lt;style&gt;
  #narrorColumn{
    width: 250px;
  }
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
 function ShrinkTable(){
var FontSize = 6;

function ShrinkTable(){
   var TabWidth = $("#tbl").width();
   var DivWidth= $("#narrowColumn");
   if (DivWidth &lt;= TabWidth)
    {
      $("#tbl").css('font-size', FontSize);
    }
}


&lt;/script&gt;

&lt;/head&gt;
&lt;body onLoad="ShrinkTable()" &gt;
&lt;div id = "narrorColumn" &gt;
&lt;table id="tbl" border="10"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;First Column&lt;/th&gt;
&lt;th&gt;Second Column&lt;/th&gt;
&lt;th&gt;Third Column&lt;/th&gt;
&lt;th&gt;Forth Column&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Some Random text here&lt;/td&gt;
&lt;td&gt;Some Random text here&lt;/td&gt;
&lt;td&gt;Some Random text here&lt;/td&gt;
&lt;td&gt;Some Random text here&lt;/td&gt;
 &lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Mary Had a little lamb&lt;/td&gt;
&lt;td&gt;Mary Had a little lamb&lt;/td&gt;
&lt;td&gt;Mary Had a little lamb&lt;/td&gt;
&lt;td&gt;Mary Had a little lamb&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Humpty Dumpty sat on a wall&lt;/td&gt;
&lt;td&gt;Humpty Dumpty sat on a wall&lt;/td&gt;
&lt;td&gt;Humpty Dumpty sat on a wall&lt;/td&gt;
&lt;td&gt;Humpty Dumpty sat on a wall&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Hay diddle diddle the kat and the fiddle&lt;/td&gt;
&lt;td&gt;Hay diddle diddle the kat and the fiddle&lt;/td&gt;
&lt;td&gt;Hay diddle diddle the kat and the fiddle&lt;/td&gt;
&lt;td&gt;Hay diddle diddle the kat and the fiddle&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;div&gt; &lt;input type=button value="Make Big" onClick="$('#tbl').makeBig()"&gt;
&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>
