CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Naigel
Naigel

Reputation: 9644

jquery get real table height when tbody has lot of elements

I have a <table> element with a lot of rows and a max-height attribute.
I need to find the real height displayed for the <tbody> element. Normally I can just take the difference between <table> height and <thead> height

var tbodyDispalyHeight = $("table").height() - $("thead").height();

This works unless horizontal content is too much and an horizontal scrollbar appears (and can't remove it because... I need it!). I should remove its height from tbodyDispalyHeight but... how can I do?
First problem: I don't really know when this bar is displayed
Second prolbem: Each browser implement scrollbar in a different way

Here is a JSBIN example to understand what I mean. Try to resize page horizontally until the scrollbar appears, there the dislayed tbody height should be lower...

Upvotes: 2

Views: 3608

Answers (2)

hr_117
hr_117

Reputation: 9627

Sounds like you are looking for the clientHeight. (But this seems to be to easy.)
Have a look to MDN
The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
You may try:

$("table")[0].clientHeight

Upvotes: 1

ESP32
ESP32

Reputation: 8728

Currently you have your table with overflow:auto. But you could wrap it with a DIV with "overflow:auto". Then you can simply determine if you have a horizontal scrollbar by comparing the width of your div with the width of your table.

Upvotes: 1

Related Questions