添加 Accessible, Simple, Responsive Tables

修复由于 iScroll 选择以 absolute 方式移动子元素造成 dataTables_scrollHead "消失"的问题.

README.md

@@ -2,7 +2,7 @@
 ====================
 在移动平台上(Android/iOS...)可用的固定列/表头的表格组件
 
-v1.0.1 2013-10-11
+v1.0.2 2015-9-24
 
 <img src="inspiration/img/preview-mobile.png" height="504" width="897" alt="Android 2.3.x/Android 4.x/iOS上组件的运行效果截图" />
 
@@ -76,10 +76,26 @@ $('#table').mobileFixedColumnsTable({
 
 changelog
 --------------------
-v1.0.1 2013-10-11
+* v1.0.2 2015-9-24
 
-1. 修复一点点在用户体验上的问题
+  1. 修复由于 iScroll 选择以 absolute 方式移动子元素造成 dataTables_scrollHead "消失"的问题.
 
-即使页面区域还有剩余, 但表格总处于可滑动的状态出现垂直滚动条, 功能上倒是没什么影响.
+* v1.0.1 2013-10-11
 
-想了解更多信息请访问<a href="http://ufologist.github.io/mobile-fixed-columns-table">项目主页</a>
+  1. 修复一点点在用户体验上的问题, 即使页面区域还有剩余, 但表格总处于可滑动的状态出现垂直滚动条, 功能上倒是没什么影响.
+
+想了解更多信息请访问<a href="http://ufologist.github.io/mobile-fixed-columns-table">项目主页</a>
+
+其他 Responsive Tables 方案
+--------------------
+* [Accessible, Simple, Responsive Tables](https://css-tricks.com/accessible-simple-responsive-tables/)
+
+  > ![Visual examples of those four possibilities.](https://css-tricks.com/wp-content/uploads/2016/03/types-of-responsive-tables.gif)
+* [CSS only Responsive Tables](http://dbushell.com/2016/03/04/css-only-responsive-tables/)
+
+  ![Basic overflow responsive table](http://dbushell.com/images/blog/responsive-table.png)
+
+  竟然还有 Scrolling shadows, 太高级了
+
+* [Fixed-Header-Table](https://github.com/markmalek/Fixed-Header-Table)
+* [Fixed Table Header and Columns](https://github.com/meetselva/fixed-table-rows-cols)

datatables.mobile-fixed-columns-table.js

@@ -5,7 +5,7 @@
  * Released under MIT license
  * 
  * @auther Sun https://github.com/ufologist/mobile-fixed-columns-table
- * @version 1.0.1 2013-10-11
+ * @version 1.0.2 2015-9-24
  */
 (function($, root) {
     function MobileFixedColumns(fixedColumns, scrollerOptions) {
@@ -130,7 +130,15 @@
             var scrollHeader = this.fixedColumns.s.dt.nScrollHead;
             // 固定表头多余的padding-right造成iscroll拖动到最右边时表头出现空余
             // 这个padding-right是为浏览器原生的垂直滚动条预览的空间
-            $(scrollHeader).find('.dataTables_scrollHeadInner').css('padding-right', 0);
+            $(scrollHeader).find('.dataTables_scrollHeadInner')
+                           .css('padding-right', 0)
+                           .end()
+                           // iscroll 初始化会设置子元素(dataTables_scrollHeadInner) 为可移动的,
+                           // 可能是通过 translate 来实现或者 absolute 位置来实现.
+                           // 应该是根据浏览器支持(CSS3)的情况来判断使用哪一种实现.
+                           // 当选择 absolute 来实现时, 会导致父元素失去高度, 因此这里预先设置一下,
+                           // 否则在浏览器(测试了chrome 41.0.2272.101)上会出现dataTables_scrollHead"消失"的问题
+                           .height($(scrollHeader).height()); 
 
             this.fixedHeaderScroller = new iScroll(scrollHeader, MobileFixedColumns.fixedScrollerOptions);
         },