Determining the height of an HTML table that is dynamically filled
html, html-table, javascript
Solution
There isn't any way to predict the height without actually rendering it in the target browser.
Once you do that, you can use (for example) jQuery to get the height of the element:
var height = $('#myTable').height();
Problem
I would like to draw a diagram in HTML. The positioning structure looks like this: ``` <div id='hostDiv'> <div id='backgroundDiv'> ... drawing the background ... </div> <div id='foregroundDiv' style='position: absolute;'> ... drawing the foreground ... </div> </div> ``` The foreground contains a Table element that is dynamically populated with text, hence the row heights might alter depending on the amount of text going into a cell. How can I predict the final height of the Table element in the foregroun? I need this information to set the correct height of the background. Is there a way to pre-render the Table from Javascript and read out its height? Or some other trick? PS. The size of the hostDiv may vary as the browser resizes.