# Scrolling Tbody Not Working in Safari

**URL:** https://forum.kirupa.com/t/scrolling-tbody-not-working-in-safari/277819
**Category:** web dev
**Created:** [December 17, 2008, 4:06pm UTC](https://forum.kirupa.com/t/scrolling-tbody-not-working-in-safari/277819 "2008-12-17T16:06:20Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![mediumman](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mediumman/32/551_2.png) [@mediumman](https://forum.kirupa.com/u/mediumman)
#### Post date: [December 17, 2008, 4:06pm UTC](https://forum.kirupa.com/t/scrolling-tbody-not-working-in-safari/277819/1 "2008-12-17T16:06:20Z")

</div>

I’ve created a scrolling tbody table for an application and for some reason the scrollbar is not appearing in Safari…it works across IE6,7 and Firefox…below is the html and javascript…I am also going to attach both files…if anyone can help that would be great…I am thinking it has something to do with lines 53-59 in the javascript…Safari must not be responding to something.

\<html xmlns=“[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)”\>  
\<head\>  
\<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /\>  
\<title\>Test Scroll Safari\</title\>  
\<script type=“text/javascript” src=“scrolltable.js”\>\</script\>  
\</head\>  
\<body\>  
\<table cellspacing=“0” cellpadding=“0” class="" id=“myTable” width=“755”\>  
\<thead\>  
\<tr\>  
\<th width=“15” class=“c”\>\<input type=“checkbox” name=“checkall” onclick=“checkUncheckAll(this,‘check1’);”/\>\</th\>  
\<th width=“112” class=“c”\>\<a href="#" class=“table\_header\_links”\>| Message Name\</a\>\</th\>  
\<th width=“90” class=“c”\>\<a href="#" class=“table\_header\_links”\>| Created by\</a\>\</th\>  
\<th width=“122” class=“c”\>\<a href="#" class=“table\_header\_links”\>| Date Created\</a\>\</th\>  
\<th width=“122” class=“c”\>\<a href="#" class=“table\_header\_links”\>| Last Modified by\</a\>\</th\>  
\<th width=“110” class=“c”\>\<a href="#" class=“table\_header\_links”\>| Date Modified\</a\>\</th\>  
\<th width=“80” class=“c”\>\<a href="#" class=“table\_header\_links”\>| Status\</a\>\</th\>  
\</tr\>  
\</thead\>  
\<tbody\>  
\<tr class=“bottomborder”\>  
\<td width=“15” class=“c”\>\<input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/\>\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\</tr\>  
\<tr class=“bottomborder”\>  
\<td width=“15” class=“c”\>\<input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/\>\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\</tr\>  
\<tr class=“bottomborder”\>  
\<td width=“15” class=“c”\>\<input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/\>\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\</tr\>  
\<tr class=“bottomborder”\>  
\<td width=“15” class=“c”\>\<input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/\>\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\</tr\>  
\<tr class=“bottomborder”\>  
\<td width=“15” class=“c”\>\<input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/\>\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\</tr\>  
\<tr class=“bottomborder”\>  
\<td width=“15” class=“c”\>\<input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/\>\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\</tr\>  
\<tr class=“bottomborder”\>  
\<td width=“15” class=“c”\>\<input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/\>\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\</tr\>  
\<tr class=“bottomborder”\>  
\<td width=“15” class=“c”\>\<input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/\>\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\</tr\>  
\<tr class=“bottomborder”\>  
\<td width=“15” class=“c”\>\<input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/\>\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\</tr\>  
\<tr class=“bottomborder”\>  
\<td width=“15” class=“c”\>\<input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/\>\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\</tr\>  
\<tr class=“bottomborder”\>  
\<td width=“15” class=“c”\>\<input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/\>\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\</tr\>  
\<tr class=“bottomborder”\>  
\<td width=“15” class=“c”\>\<input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/\>\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\</tr\>  
\<tr class=“bottomborder”\>  
\<td width=“15” class=“c”\>\<input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/\>\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\</tr\>  
\<tr class=“bottomborder”\>  
\<td width=“15” class=“c”\>\<input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/\>\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\<td class=“c”\>test\</td\>  
\</tr\>  
\</tbody\>

\</table\>  
\<script type=“text/javascript”\>  
var tb = new ScrollableTable(document.getElementById(‘myTable’), 100);  
\</script\>  
\</body\>  
\</html\>

function ScrollableTable (tableEl, tableHeight, tableWidth) {

```
this.initIEengine = function () {

	this.containerEl.style.overflowY = 'auto';
	this.containerEl.style.overflowX = 'hidden';
	if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight &lt; 0) {
		this.tableEl.style.width = this.newWidth - this.scrollWidth +'px';
	} else {
		this.containerEl.style.overflowY = 'hidden';
		this.containerEl.style.overflowX = 'hidden';
		this.tableEl.style.width = this.newWidth +'px';
	}

	if (this.thead) {
		var trs = this.thead.getElementsByTagName('tr');
		for (x=0; x&lt;trs.length; x++) {
			trs[x].style.position ='relative';
			trs[x].style.setExpression("top", "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
		}
	}

	if (this.tfoot) {
		var trs = this.tfoot.getElementsByTagName('tr');
		for (x=0; x&lt;trs.length; x++) {
			trs[x].style.position ='relative';
			trs[x].style.setExpression("bottom", "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
		}
	}

	eval("window.attachEvent('onresize', function () { document.getElementById('" + this.tableEl.id + "').style.display = 'none'; document.getElementById('" + this.tableEl.id + "').style.display = 'block'; } )");
};

this.initFFengine = function () {
	this.containerEl.style.overflow = 'hidden';
	this.tableEl.style.width = this.newWidth + 'px';

	var headHeight = (this.thead) ? this.thead.clientHeight : 0;
	var footHeight = (this.tfoot) ? this.tfoot.clientHeight : 0;
	var bodyHeight = this.tbody.clientHeight;
	var trs = this.tbody.getElementsByTagName('tr');
	if (bodyHeight &gt;= (this.newHeight - (headHeight + footHeight))) {
		this.tbody.style.overflow = '-moz-scrollbars-vertical';
		for (x=0; x&lt;trs.length; x++) {
			var tds = trs[x].getElementsByTagName('td');
			tds[tds.length-1].style.paddingRight += this.scrollWidth + 'px';
		}
	} else {
		this.tbody.style.overflow = '-moz-scrollbars-none';
	}
	
	var cellSpacing = (this.tableEl.offsetHeight - (this.tbody.clientHeight + headHeight + footHeight)) / 4;
	var xHeight = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)); // Fix for FireFox 3, Table Height
	//alert(xHeight);
	if(this.tableEl.offsetHeight &gt; xHeight){ // Fix for FireFox 3, Table Height
		this.tbody.style.height = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)) + 'px';
		//alert(this.tbody.style.height);
	}
};

this.tableEl = tableEl;
this.scrollWidth = 16;

this.originalHeight = this.tableEl.clientHeight;
this.originalWidth = this.tableEl.clientWidth;

this.newHeight = parseInt(tableHeight);
this.newWidth = tableWidth ? parseInt(tableWidth) : this.originalWidth;

this.tableEl.style.height = 'auto';
this.tableEl.removeAttribute('height');

this.containerEl = this.tableEl.parentNode.insertBefore(document.createElement('div'), this.tableEl);
this.containerEl.appendChild(this.tableEl);
this.containerEl.style.height = this.newHeight + 'px';
this.containerEl.style.width = this.newWidth + 'px';

var thead = this.tableEl.getElementsByTagName('thead');
this.thead = (thead[0]) ? thead[0] : null;

var tfoot = this.tableEl.getElementsByTagName('tfoot');
this.tfoot = (tfoot[0]) ? tfoot[0] : null;

var tbody = this.tableEl.getElementsByTagName('tbody');
this.tbody = (tbody[0]) ? tbody[0] : null;

if (!this.tbody) return;

if (document.all && document.getElementById && !window.opera) this.initIEengine();
if (!document.all && document.getElementById && !window.opera) this.initFFengine();

```

}
