jQuery Scroll Table

imple jQuery compatible scroll table plugin.

HTML

<script src="https://raw.github.com/th3uiguy/jquery-scrolltable/master/jquery.scrolltable.js"></script>
<h1>jQuery Scroll Table Demo</h1>

<div id="controls">
	<button id="removeScroll">Remove Scroll</button>
	<button id="applyScroll">Apply Scroll</button>
</div>
<div style="clear:both" />

<table class="scrollTable" cellpadding="0" cellspacing="0" border="0">
<thead>
	<tr>
		<!-- Notice it is smart about how to use the widths below, trying to maintain the intended layout -->
		<th width="10%" style="width:10%">Col 1</th>
		<th>Col 2</th>
		<th style="width:80px">Col 3</th>
		<th width="40%">Col 4</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Row 1</td>
		<td>Row 1 cell with some content</td>
		<td>Row 1</td>
		<td>Row 1 cell with more content inside of it</td>
	</tr>
	<tr>
		<td>Row 2</td>
		<td>Row 2 cell with some content</td>
		<td>Row 2</td>
		<td>Row 2 cell with more content inside of it</td>
	</tr>
	<tr>
		<td>Row 3</td>
		<td>Row 3 cell with some content</td>
		<td>Row 3</td>
		<td>Row 3 cell with more content inside of it</td>
	</tr>
	<tr>
		<td>Row 4</td>
		<td>Row 4 cell with some content</td>
		<td>Row 4</td>
		<td>Row 4 cell with more content inside of it</td>
	</tr>
	<tr>
		<td>Row 5</td>
		<td>Row 5 cell with some content</td>
		<td>Row 5</td>
		<td>Row 5 cell with more content inside of it</td>
	</tr>
	<tr>
		<td>Row 6</td>
		<td>Row 6 cell with some content</td>
		<td>Row 6</td>
		<td>Row 6 cell with more content inside of it</td>
	</tr>
	<tr>
		<td>Row 7</td>
		<td>Row 7 cell with some content</td>
		<td>Row 7</td>
		<td>Row 7 cell with more content inside of it</td>
	</tr>
	<tr>
		<td>Row 8</td>
		<td>Row 8 cell with some content</td>
		<td>Row 8</td>
		<td>Row 8 cell with more content inside of it</td>
	</tr>
	<tr>
		<td>Row 9</td>
		<td>Row 9 cell with some content</td>
		<td>Row 9</td>
		<td>Row 9 cell with more content inside of it</td>
	</tr>
	<tr>
		<td>Row 10</td>
		<td>Row 10 cell with some content</td>
		<td>Row 10</td>
		<td>Row 10 cell...

CSS

body{ font-size: 0.9em; font-family: Arial, Verdana, sans-serif; color:#555; }
h1{ margin-top: 0; float: left; }
#controls{ float: left; padding: 0.3em 1em; }

table.scrollTable{
	width:100%; 
	border:1px solid #ddd;
}
thead{
	background-color: #eee;
}
thead th{
	text-align: center;
	padding:0.1em 0.3em;
}
tbody td{
	border-top:1px solid #eee;
	border-right:1px solid #eee;
	padding:0.1em 0.3em;
}
tbody tr.odd td{
	background-color: #f9f9f9;
}

JavaScript

$('#removeScroll').click(function(){
	$('.scrollTable').scrolltable('destroy');
})
$('#applyScroll').click(function(){
	$('.scrollTable').scrolltable({
		stripe: true,
		oddClass: 'odd',
    height: 50
	});
});

$('#applyScroll').trigger('click');