Is there a way to use JavaScript to accurately determine the height of a table row in pixels? Specifically, I am looking for the measurement from the top of one green border to the top of the next green border.
I have tried using jQuery's .height(), outerHeight(), .offsetHeight, and .clientHeight methods but they do not provide the correct answer (which is 44px). (see http://jsfiddle.net/kaG7g/8/)
Here is the HTML:
<table>
<tr><td>this a table</td></tr>
<tr><td>this is a contents</td></tr>
<tr id="tableElement"><td>of element</td></tr>
</table>
CSS:
td {
height: 20px;
border-top: 10px solid green;
border-bottom: 10px solid yellow;
}