Question

I have a table which can have rows and columns added to and removed from it. I’d like to put a textarea to the side of it which will be kept to the same size as the table, so that it looks good.

I have to issues. First is getting it to show up on the right side of the table (provided there is space, if not it should wrap).

I have tried setting style to display: inline-table on the table and it does make the textarea (which is a sibling to the table in the DOM) show up to its right, but it does not line up in IE9, Opera, or Firefox. The textarea sticks up over the table. Works with Webkit. Webkit also has a nice grabber thingy on the bottom right to let me adjust the size.

If I use display: inline-block it now works in Firefox. Still broken in IE9 and Opera.

For dynamic resizing, I could just call a function to resize it every time the table changes.

How do I retrieve the size of a table or other element (in pixel units or other units)?

Fiddle demonstrating issue: http://jsfiddle.net/7jKDm/4/

Answer 1

var height = document.getElementById('tbl').clientHeight;

seems to do the trick. I believe it is in pixels.

As far as getting it to align with the table, you can have to last column of your table hold this textarea and rowspan the whole table, or you can set up column divs, which there are plenty of tutorials for with google search.

Seems like this person also got it to work using .offsetHeight