* fixed datatable for ie8 and firefox.

dist/js/zui.js

 /*!
- * ZUI - v1.1.0 - 2014-08-15
+ * ZUI - v1.1.0 - 2014-08-18
  * http://zui.sexy
  * GitHub: https://github.com/easysoft/zui.git 
  * Copyright (c) 2014 cnezsoft.com; Licensed MIT
@@ -4704,8 +4704,8 @@ var imgReady = (function () {
             cols = this.data.cols,
             leftHtml = '', rightHtml = '', flexHtml = '',
             rows = this.data.rows;
-        var dataRowSpan = '<div class="datatable-rows-span datatable-span {0}"><table class="table' + options.tableClass + '"><tbody>{1}</tbody></table>{2}</div>',
-            dataHeadSpan = '<div class="datatable-head-span datatable-span {0}"><table class="table' + options.tableClass + '"><thead><tr>{1}</tr></thead></table>{2}</div>';
+            var dataRowSpan = '<div class="datatable-rows-span datatable-span {0}"><div class="datatable-wrapper"><table class="table' + options.tableClass + '"><tbody>{1}</tbody></table>{2}</div></div>',
+            dataHeadSpan = '<div class="datatable-head-span datatable-span {0}"><div class="datatable-wrapper"><table class="table' + options.tableClass + '"><thead><tr>{1}</tr></thead></table>{2}</div></div>';
 
         if(init)
         {
@@ -4905,8 +4905,8 @@ var imgReady = (function () {
         if(this.data.flexArea)
         {
             var $scrollbar = $datatable.find('.scroll-slide'),
-                $flexArea  = $datatable.find('.datatable-span.flexarea > .table'),
-                $flexTable = $datatable.find('.datatable-rows-span.flexarea > .table');
+                $flexArea  = $datatable.find('.datatable-span.flexarea .table'),
+                $flexTable = $datatable.find('.datatable-rows-span.flexarea .table');
             var $bar = $scrollbar.children('.bar'),
                 flexWidth,
                 scrollWidth,

dist/js/zui.lite.js

 /*!
- * ZUI - v1.1.0 - 2014-08-15
+ * ZUI - v1.1.0 - 2014-08-18
  * http://zui.sexy
  * GitHub: https://github.com/easysoft/zui.git 
  * Copyright (c) 2014 cnezsoft.com; Licensed MIT

dist/js/zui.lite.min.js

 /*!
- * ZUI - v1.1.0 - 2014-08-15
+ * ZUI - v1.1.0 - 2014-08-18
  * http://zui.sexy
  * GitHub: https://github.com/easysoft/zui.git 
  * Copyright (c) 2014 cnezsoft.com; Licensed MIT

src/js/datatable.js

@@ -201,8 +201,8 @@
             cols = this.data.cols,
             leftHtml = '', rightHtml = '', flexHtml = '',
             rows = this.data.rows;
-        var dataRowSpan = '<div class="datatable-rows-span datatable-span {0}"><table class="table' + options.tableClass + '"><tbody>{1}</tbody></table>{2}</div>',
-            dataHeadSpan = '<div class="datatable-head-span datatable-span {0}"><table class="table' + options.tableClass + '"><thead><tr>{1}</tr></thead></table>{2}</div>';
+            var dataRowSpan = '<div class="datatable-rows-span datatable-span {0}"><div class="datatable-wrapper"><table class="table' + options.tableClass + '"><tbody>{1}</tbody></table>{2}</div></div>',
+            dataHeadSpan = '<div class="datatable-head-span datatable-span {0}"><div class="datatable-wrapper"><table class="table' + options.tableClass + '"><thead><tr>{1}</tr></thead></table>{2}</div></div>';
 
         if(init)
         {
@@ -402,8 +402,8 @@
         if(this.data.flexArea)
         {
             var $scrollbar = $datatable.find('.scroll-slide'),
-                $flexArea  = $datatable.find('.datatable-span.flexarea > .table'),
-                $flexTable = $datatable.find('.datatable-rows-span.flexarea > .table');
+                $flexArea  = $datatable.find('.datatable-span.flexarea .table'),
+                $flexTable = $datatable.find('.datatable-rows-span.flexarea .table');
             var $bar = $scrollbar.children('.bar'),
                 flexWidth,
                 scrollWidth,

src/less/views/datatable.less

@@ -6,11 +6,6 @@
   table-layout:fixed;
 }
 
-.datatable-span
-{
-  display: table-cell;
-}
-
 .datatable
 {
   margin-bottom: 20px;
@@ -89,7 +84,7 @@
 
   &.sortable
   {
-    .datatable-head-span > .table > thead > tr > th
+    .datatable-head-span .table > thead > tr > th
     {
       cursor: pointer;
       .nobr();
@@ -209,13 +204,15 @@
   }
 }
 
+.datatable-wrapper {position: relative;}
+
 .datatable-span
 {
+  display: table-cell;
+
   &.flexarea
   {
-    position: relative;
     overflow: hidden;
-    transition: box-shadow 0.5s;
 
     &.datatable-head-span
     {
@@ -225,14 +222,14 @@
       }
     }
 
-    > .table
+    .table
     {
-      position: absolute;
+      position: relative;
       left: 0;
       top: 0;
     }
 
-    > .scrolled-shadow
+    .scrolled-shadow
     {
       width: 20px;
       position: absolute;
@@ -244,17 +241,17 @@
       .transition();
     }
 
-    > .scrolled-in-shadow
+    .scrolled-in-shadow
     {
       left: -30px;
     }
 
-    > .scrolled-out-shadow
+    .scrolled-out-shadow
     {
       right: -30px;
     }
 
-    > .scroll-slide
+    .scroll-slide
     {
       position: absolute;
       bottom: 0;