Force specific height of a table and add a scrollbar
<p>So i have a empty table</p>

<p>HTML:</p>

<pre><code>&lt;div&gt;
    &lt;table border="1" id="committabelle"&gt;&lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>and a JScript function which fills the table</p>

<p>JSCRIPT:</p>

<pre><code>function loadCommits(xml) { 
    var i;
    var xmlDoc = xml.responseXML;
    var table = '&lt;tr&gt;&lt;th&gt;Commit&lt;/th&gt;&lt;th&gt;User&lt;/th&gt;&lt;th&gt;Datum&lt;/th&gt;&lt;th&gt;More Information&lt;/th&gt;&lt;/tr&gt;';
    var shortId = xmlDoc.getElementsByTagName("a:ShortId");
    var user = xmlDoc.getElementsByTagName("a:UserId");
    var Date = xmlDoc.getElementsByTagName("a:Date");           
    for (i = 0; i &lt; shortId.length; i++) {
        var tmp = shortId[i].childNodes[0].nodeValue später an den Button
        var datetmp = Date[i].childNodes[0].nodeValue                
        var euro_date = datetmp.split('T');          
        var date_de = euro_date.join('--');
    table += "&lt;tr&gt;&lt;td&gt;" +
        shortId[i].childNodes[0].nodeValue +
        "&lt;/td&gt;&lt;td&gt;" +
        user[i].childNodes[0].nodeValue +
        "&lt;/td&gt;&lt;td&gt;" +
        date_de +
        "&lt;/td&gt;&lt;td&gt;" +                
        '&lt;button id="' + shortId[i].childNodes[0].nodeValue + '" class="button button2" &gt;Give me Information!&lt;/button&gt;' +              
        "&lt;/td&gt;&lt;/tr&gt;";                
    }.
    document.getElementById("committabelle").innerHTML = table;
}
</code></pre>

<p>The problem is that I can't change the size of the table. I wanted to change it so the height is for example 200px and then I used overflow so i get a scrollbar. I tried literally everything from height to max-height, table-layout: fixed and from overflow: auto to overflow: scroll. I event tried to force the size of the table with the browser-DOM-explorer after it is loaded in the browser.</p>

<p>I'm a little desperate right now. Anyone got an idea?</p>