0

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?

http://jsfiddle.net/BvPNK/3/

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;
}
MrBrightside
  • 593
  • 2
  • 10
  • 22

2 Answers2

4

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.

Community
  • 1
  • 1
Nick Rolando
  • 25,879
  • 13
  • 79
  • 119
1

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/

hereandnow78
  • 14,094
  • 8
  • 42
  • 48