Added much better support for different themes. Made rows hoverable

Author: rdworth

grid-markup/grid.css

@@ -33,8 +33,7 @@ Presentational
 	border-right-width: 0;
 }
 .ui-grid .ui-grid-body {
-	border-top-width: 0;
-	border-bottom-width: 0;
+	border-width: 0;
 }
 .ui-grid .ui-grid-body tr {
 	height: 2em;
@@ -45,6 +44,7 @@ Presentational
 .ui-grid .ui-grid-body td {
 	border-top-width: 0;
 	border-right-width: 0;
+	background: none;
 }
 .ui-grid th, .ui-grid td {
 	padding: 0.2em 0.4em;
@@ -53,15 +53,18 @@ Presentational
 	border-top-width: 0;
 }
 
+.ui-grid .ui-grid-body {
+	background-image: none;
+}
 .ui-grid tr.ui-state-default,
 .ui-grid td.ui-state-default {
-	background: none;
+	background-image: none;
 }
 
 .ui-grid-resizable .ui-resizable-se {
 	width: 17px;
 	height: 17px;
-	bottom: -5px;
+	bottom: -4px;
 	right: -2px;
 }
 .ui-grid-resizable .ui-resizable-s {

grid-markup/grid.js

@@ -20,15 +20,15 @@ $.widget( "ui.grid", {
 				.insertBefore( this.element ),
 
 			// Add grid head and grid body
-			uiGridHead = ( this.uiGridHead = $("<div class='ui-widget-header ui-grid-head'></div>") )
+			uiGridHead = ( this.uiGridHead = $("<div class='ui-grid-head'></div>") )
 				.appendTo( uiGrid ),
 			uiGridBody = ( this.uiGridBody = $("<div class='ui-widget-content ui-grid-body'></div>") )
 				.appendTo( uiGrid ),
 			uiGridFoot = ( this.uiGridFoot = $("<div class='ui-widget-header ui-grid-foot'></div>") )
 				.appendTo( uiGrid ),
 
 			// New table in grid head for column headers
-			uiGridHeadTable = ( this.uiGridHeadTable = $("<table class='ui-grid-head-table'></table>") )
+			uiGridHeadTable = ( this.uiGridHeadTable = $("<table class='ui-widget-content ui-grid-head-table'></table>") )
 				.appendTo( uiGridHead );
 
 			// Existing table in grid body for the body table
@@ -37,7 +37,7 @@ $.widget( "ui.grid", {
 				.appendTo( uiGridBody );
 
 		// Move table CAPTION to grid head
-		uiGridBodyTable.find( "caption" )
+		uiGridBodyTable.find( "caption" ).addClass( "ui-widget-header" )
 			.prependTo( uiGridHeadTable );
 
 		// Create COLGROUP and COLs if missing
@@ -72,7 +72,7 @@ $.widget( "ui.grid", {
 		this._hoverable( uiGridHeadTable.find("th").addClass("ui-state-default") );
 
 		// Give body rows a clickable state
-		uiGridBodyTable.find( "tr" ).addClass( "ui-state-default" );
+		this._hoverable( uiGridBodyTable.find( "tr" ).addClass( "ui-state-default" ) );
 
 		// Give body cells a clickable state
 		uiGridBodyTable.find( "td" ).addClass( "ui-state-default" );