document IE9 hack

awerlang · awerlang · commit 63887245d5aa · 2016-04-03T22:31:42.000-03:00
diff --git a/README.md b/README.md
@@ -95,6 +95,27 @@ All this work is based on the following assumptions:
 
     var app = angular.module('app', ['wt.responsive']);
 
+## Special cases
+
+### IE9 responsive hack
+
+Because IE9 doesn't handle correctly a `display` CSS rule for `<td>`, if you need to support it, you can use the following style, only for IE9:
+
+```css
+<!--[if IE 9]>
+<style>
+/* rules for IE9 only */
+.responsive {
+    overflow: hidden;
+}
+.responsive td:nth-child(odd), .responsive td:nth-child(even) {
+    float: left;
+    width: 100%;
+}
+</style>
+<![endif]-->
+```
+
 ## Credits
 
 CSS based on original work by Chris Coyier (http://css-tricks.com/responsive-data-tables/). In this article, he covers approaches to responsive tables. I modified it to work around CSS specificity and to keep things DRY.
diff --git a/examples/index.html b/examples/index.html
@@ -1,11 +1,25 @@
 <!DOCTYPE html>
 <html ng-app="app">
 <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
     <script src="../bower_components/angular/angular.js"></script>
     <script src="../release/angular-responsive-tables.js"></script>
     <script src="controller.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
     <link rel="stylesheet" href="../release/angular-responsive-tables.css">
+    
+    <!--[if IE 9]>
+    <style>
+    /* rules for IE9 only */
+    .responsive {
+        overflow: hidden;
+    }
+    .responsive td:nth-child(odd), .responsive td:nth-child(even) {
+        float: left;
+        width: 100%;
+    }
+    </style>
+    <![endif]-->
 </head>
 <body ng-controller="TestController as ctrl">
     <h1>Angular Responsive Tables</h1>
