I have the following which is a mostly css scrollable table. Works great in Chrome and Firefox, but it will not set the height of the tbody element in IE 9. any thoughts?
function scrollify(table,height){
table.find('thead').addClass('fixed_header');
table.find('tbody').addClass('scroll_content').height(height);
$('<div/>').addClass('table_wrap').appendTo(table.parent()).append(table);
}
css
.fixed_header th,tbody.scroll_content td{
display:block;
float:left;
width:3em;/*this is dynamically set in full function*/
}
.table_wrap{
float:left;
}
.fixed_header tr{
position:relative;
}
.scroll_content{
display:block;
overflow-y:scroll;
overflow-x:show;
}
It appears that it is simply an issue with IE not respecting tbody (or table for that matter) height
css property. I could not for the life of me style the height for table or tbody elements in IE. You can see in this answer , that the last comment mentions it does not work for IE.
to set the css height of ein element you should use the css-function. the height function should be used to do mathematical stuff.
you did that correct in your second fiddle. if you do this, you should call your function with a string as param, and your unit:
scrollify($('table'), "300px");
edit: there really seems to be an issue with height and ie9. innerHeight though should work.
i updated the fiddle: http://jsfiddle.net/BvPNK/10/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.