Move themeClass and height from JavaScript to HTML. This makes the configuration easier and gives much better backward compatibility if JavaScript is turned off.

Author: macfreek

demo/css/myTheme.css

@@ -50,6 +50,18 @@
 	height: 500px;
 	}
 
+.height250 {
+        height: 250px;
+        overflow-x: auto;
+        overflow-y: auto;
+}
+
+.height400 {
+        height: 400px;
+        overflow-x: auto;
+        overflow-y: auto;
+}
+
 .fancyTable td, .fancyTable th {
 	/* appearance */
 	border: 1px solid #778899;

demo/demo.js

@@ -1,13 +1,13 @@
 $(document).ready(function() {
-    $('.myTable01').fixedHeaderTable({ height: '250', footer: true, cloneHeadToFoot: true, altClass: 'odd', themeClass: 'fancyTable', autoShow: false });
+    $('#myTable01').fixedHeaderTable({ footer: true, cloneHeadToFoot: true, altClass: 'odd', autoShow: false });
 
-    $('.myTable01').fixedHeaderTable('show', 1000);
+    $('#myTable01').fixedHeaderTable('show', 1000);
 
-    $('.myTable02').fixedHeaderTable({ height: '250', footer: true, altClass: 'odd', themeClass: 'fancyTable' });
+    $('#myTable02').fixedHeaderTable({ footer: true, altClass: 'odd' });
 
-    $('.myTable03').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, fixedColumns: 1, themeClass: 'fancyTable' });
+    $('#myTable05').fixedHeaderTable({ altClass: 'odd', footer: true, fixedColumns: 1 });
 
-    $('.myTable04').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, cloneHeadToFoot: true, fixedColumns: 3, themeClass: 'fancyTable' });
+    $('#myTable03').fixedHeaderTable({ altClass: 'odd', footer: true, fixedColumns: 1 });
 
-    $('.myTable05').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, fixedColumns: 1, themeClass: 'fancyTable' });
-});
+    $('#myTable04').fixedHeaderTable({ altClass: 'odd', footer: true, cloneHeadToFoot: true, fixedColumns: 3 });
+});

demo/test.html

@@ -15,19 +15,17 @@
     		<div class="grid_4">
     			<pre>
     				<code>
-$('.myTable01').fixedHeaderTable({ 
-	height: '250',
+$('#myTable01').fixedHeaderTable({ 
 	footer: true,
 	cloneHeadToFoot: true,
 	altClass: 'odd',
-	themeClass: 'fancyTable',
 	autoShow: false
 });
     				</code>
     			</pre>
     		</div>
-    		<div class="grid_8">
-    			<table class="myTable01" cellpadding="0" cellspacing="0">
+    		<div class="grid_8 height250">
+    			<table class="fancyTable" id="myTable01" cellpadding="0" cellspacing="0">
     			    <thead>
     			        <tr>
     			            <th>Browser</th>
@@ -177,17 +175,15 @@
         	<div class="grid_4">
         		<pre>
         		    				<code>
-$('.myTable02').fixedHeaderTable({
-	height: '250',
+$('#myTable02').fixedHeaderTable({
 	footer: true,
 	altClass: 'odd',
-	themeClass: 'fancyDarkTable'
 });
         		    				</code>
         		    			</pre>
         	</div>
-        	<div class="grid_8">
-        		<table class="myTable02" cellpadding="0" cellspacing="0">
+        	<div class="grid_8 height250">
+        		<table class="fancyTable" id="myTable02" cellpadding="0" cellspacing="0">
         		    <thead>
         		        <tr>
         		            <th>Browser</th>
@@ -379,18 +375,16 @@
         	<div class="grid_4">
         		<pre>
         			<code>
-$('.myTable05').fixedHeaderTable({
-	height: '400',
+$('#myTable05').fixedHeaderTable({
 	altClass: 'odd',
 	footer: true,
 	fixedColumns: 1,
-	themeClass: 'fancyTable'
 });
         			</code>
         		</pre>
         	</div>
-        	<div class="grid_4">
-        		<table class="myTable05" cellpadding="0" cellspacing="0">
+        	<div class="grid_4 height400">
+        		<table class="fancyTable" id="myTable05" cellpadding="0" cellspacing="0">
         		    <thead>
         		        <tr>
         		            <th>Browser</th>
@@ -692,18 +686,16 @@
         	<div class="grid_4">
         		<pre>
         			<code>
-$('.myTable03').fixedHeaderTable({
-	height: '400',
+$('#myTable03').fixedHeaderTable({
 	altClass: 'odd',
 	footer: true,
 	fixedColumns: 1,
-	themeClass: 'fancyTable'
 });
         			</code>
         		</pre>
         	</div>
-        	<div class="grid_4">
-        		<table class="myTable03" cellpadding="0" cellspacing="0">
+        	<div class="grid_4 height400">
+        		<table class="fancyTable" id="myTable03" cellpadding="0" cellspacing="0">
         		    <thead>
         		        <tr>
         		            <th>Browser</th>
@@ -997,19 +989,17 @@
         	<div class="grid_4">
         		<pre>
         			<code>
-$('.myTable04').fixedHeaderTable({
-	height: '400',
+$('#myTable04').fixedHeaderTable({
 	altClass: 'odd',
 	footer: true,
 	cloneHeadToFoot: true,
 	fixedColumn: 3,
-	themeClass: 'fancyTable'
 });
         			</code>
         		</pre>
         	</div>
-        	<div class="grid_4">
-        		<table class="myTable04" cellpadding="0" cellspacing="0">
+        	<div class="grid_4 height400">
+        		<table class="fancyTable" id="myTable04" cellpadding="0" cellspacing="0">
         		    <thead>
         		        <tr>
         		            <th>Browser</th>