HTML Scrollable table

Computer Programming Forums : Questions and Answers, Articles, Tutorials, and Code Snippets

Switch to full style
HTML,DHTML,Javascript,XML,CSS
Post a reply
mileloader
  • mileloader
  • Posts: 95
  • Joined: Sun May 25, 2008 5:34 pm

HTML Scrollable table

Sun Nov 30, 2008 11:28 pm

This code allow to make a scrollable HTML table , the basic idea the you determine the width and height of your table and pass them as a parameter ScrollableTable Javascript function , when the width and height are less than the required , the scrollable will appear , take in mind that you will send id of your table to the function which here is "myScrollTable" .You can change the rows background colors , by changing the CSS part in the start of the html file ,
Code:
   background: #99FF99;



Here index.html :
html code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Scrollable HTML table</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="myscript.js"></script>

    <style>
        table {
            text-align: left;
            font-size: 12px;
            font-family: verdana;
            background: #c0c0c0;
        }

        table thead  {
            cursor: pointer;
        }

        table thead tr,
        table tfoot tr {
            background: #99FF99;
        }

        table tbody tr {
            background: #00FFFF;
        }

        td, th {
            border: 1px solid white;
        }
    </style>
</head>

<body>

<table cellspacing="1" cellpadding="2" class="" id="myScrollTable" width="400">
    <thead>
        <tr>
            <th>Data1</th>
            <th>Data2</th>
            <th>Data3</th>
        </tr>
    </thead>

    <tbody>
        <tr class="r1">
            <td>AAA</th>
            <td>AAA</th>
            <td>AAA</th>
        </tr>
        <tr class="r2">
            <td>BBB</th>
            <td>BBB</th>
            <td>BBB</th>
        </tr>
        <tr class="r1">
            <td>CCC</th>
            <td>CCC</th>
            <td>CCC</th>
        </tr>
        <tr class="r2">
            <td>DDD</th>
            <td>DDD</th>
            <td>DDD</th>
        </tr>
        <tr class="r1">
            <td>EEE</th>
            <td>EEE</th>
            <td>EEE</th>
        </tr>
        <tr class="r2">
            <td>FFF</th>
            <td>FFF</th>
            <td>FFF</th>
        </tr>
        <tr class="r1">
            <td>GGG</th>
            <td>GGG</th>
            <td>GGG</th>
        </tr>
        <tr class="r2">
            <td>III</th>
            <td>III</th>
            <td>III</th>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th>Data1</th>
            <th>Data2</th>
            <th>Data3</th>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">
var t = new ScrollableTable(document.getElementById('myScrollTable'), 150,250);
</script>

</body>
</html>


Here myscript.js file ,

html code 
function ScrollableTable (tableEl, tableHeight, tableWidth) {

	this.initIEengine = function () {

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

		if (this.thead) {
			var trs = this.thead.getElementsByTagName('tr');
			for (x=0; x<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<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.visibility = 'hidden'; document.getElementById('" + 

this.tableEl.id + "').style.visibility = 'visible'; } )");
	};


	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 >= (this.newHeight - (headHeight + footHeight))) {
			this.tbody.style.overflow = '-moz-scrollbars-vertical';
			for (x=0; x<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;

		this.tbody.style.height = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)) + 'px';

	};

	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();


}



Attachments
qa.JPG
screen shot of scrollable table in HTML
qa.JPG (12.91 KiB) Viewed 40209 times

robhmac
  • robhmac
  • Posts: 4
  • Joined: Thu Mar 05, 2009 11:38 pm

Re: HTML Scrollable table

Thu Mar 05, 2009 11:44 pm

So far, this is the best implementation that I have come across for a scrollable table.

Is there a way to modify this script so that you can also have a locked left column in addition to a locked row at the top?

Thank you.

hearts
  • hearts
  • Posts: 1
  • Joined: Fri Sep 18, 2009 6:30 am

Re: HTML Scrollable table

Fri Sep 18, 2009 6:41 am

How can I use rowspan.

codemiles

Re: HTML Scrollable table

Sat Sep 19, 2009 3:26 am

rowspan control the number of span rows in your table . You can have one column that have length of two rows , or three ,
you use it with <Td> tag :
Code:
 
<td ROWSPAN=4></td>
 


robhmac
  • robhmac
  • Posts: 4
  • Joined: Thu Mar 05, 2009 11:38 pm

Re: HTML Scrollable table

Sat Sep 19, 2009 5:30 am

I have since found another script, by Richard Cornford, that allows for a locked top row, and a locked left column:

http://www.oasections.com/articles/scrollabletable.html

also, rowspan and colspan can be used as normal

howard001
  • howard001
  • Posts: 1
  • Joined: Sun Sep 20, 2009 10:21 am
  • Location: US

Re: HTML Scrollable table

Sun Sep 20, 2009 11:14 am

Scrollable HTML table JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer rows (if you need them) in TFOOT section and give your table an ID field, include the webtoolkit.scrollabletable.js file and create ScrollableTable() object after each table.

Scrollable HTML table code tested in IE5.0+, FF1.5+.
Source code for index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scrollable HTML table</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="webtoolkit.scrollabletable.js"></script>

<style>
table {
text-align: left;
font-size: 12px;
font-family: verdana;
background: #c0c0c0;
}

table thead {
cursor: pointer;
}

table thead tr,
table tfoot tr {
background: #c0c0c0;
}

table tbody tr {
background: #f0f0f0;
}

td, th {
border: 1px solid white;
}
</style>
</head>

<body>

<table cellspacing="1" cellpadding="2" class="" id="myScrollTable" width="400">
<thead>
<tr>
<th class="c1">Name</th>
<th class="c2">Surename</th>
<th class="c3">Age</th>
</tr>
</thead>

<tbody>
<tr class="r1">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">30</th>
</tr>
<tr class="r2">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">31</th>
</tr>
<tr class="r1">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">32</th>
</tr>
<tr class="r2">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">33</th>
</tr>
<tr class="r1">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">34</th>
</tr>
<tr class="r2">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">35</th>
</tr>
<tr class="r1">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">36</th>
</tr>
<tr class="r2">
<td class="c1">John</th>
<td class="c2">Smith</th>
<td class="c3">37</th>
</tr>
</tbody>

<tfoot>
<tr>
<th class="c1">Name</th>
<th class="c2">Surename</th>
<th class="c3">Age</th>
</tr>
</tfoot>
</table>

<script type="text/javascript">
var t = new ScrollableTable(document.getElementById('myScrollTable'), 100);
</script>

</body>
</html>

Source code for webtoolkit.scrollabletable.js

/**
*
* Scrollable HTML table
* http://www.webtoolkit.info/
*
**/

function ScrollableTable (tableEl, tableHeight, tableWidth) {

this.initIEengine = function () {

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

if (this.thead) {
var trs = this.thead.getElementsByTagName('tr');
for (x=0; x<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<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.visibility = 'hidden'; document.getElementById('" + this.tableEl.id + "').style.visibility = 'visible'; } )");
};


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 >= (this.newHeight - (headHeight + footHeight))) {
this.tbody.style.overflow = '-moz-scrollbars-vertical';
for (x=0; x<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;
this.tbody.style.height = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)) + 'px';

};

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();


} :sohappy:

Post a reply
  Related Posts  to : HTML Scrollable table
 Full scrollable table     -  
 adding caption to table in html     -  
 HTML Table Of Contents Generator     -  
 Sort HTML table from JQuery     -  
 Use for loop to output HTML table     -  
 row highlight of table     -  
 table row hover     -  
 Using table in latex     -  
 Creating table using div tag     -  
 Div Table with css row span     -  
Switch to full style

Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com


Powered by phpBB © phpBB Group.


Codemiles.com