tbody overflow issue

I developed a pop-up windows for the new catalog on the site http://new.rdalfa.lv/en/menu/5-goods_catalogue.html.
With the help of sitepoint.com I found that css method, which I used is not compatible with Internet Explorer and Chrome browsers, but works pretty well on Firefox.

I have such html code:

Header
Body line1
Body line2
Body line3

I used the following scheme:

tbody {
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
}

This supposed to make scrolling only tbody frame.
As I said before this worked only for Firefox, but not for Chrome and IE.

Solution I implemented was the following:

div#item-info {
	display: block;
	overflow: hidden;
	height:345px;
	float:left;
	position: relative;
}
div#print_area {
	width: 400px;
	overflow-y: auto;
	overflow-x: hidden;
	height: 300px;
}
table#params_table thead{
display: table-header-group;
}
table#params_table tbody {
display: table-row-group;
}

Actually, my case is not that correct example. It was enough for me to make inner scroll of div#print_area section. But in general the idea is pretty clear.

2 comments

Leave a Reply

%d bloggers like this: