Tables: Re-vamped the IE9 CSS hacks to be max-width media queries

toddparker · toddparker · commit 942ea922ffc1 · 2012-11-21T22:04:54.000-05:00
This was needed because negating the float and width properties were
causing issues, especially on the more complex tables. Using max-width
means that we don't need to negate anything. If we can find a clean way
to negate these styles, we can simplify things a bit. All demos now
work on IE9 and are solid.
diff --git a/css/structure/jquery.mobile.table.reflow.css b/css/structure/jquery.mobile.table.reflow.css
@@ -19,21 +19,6 @@
 		text-align: left;
 		display: block;
 	}
-	/* Make IE9 and WP7.5 treat cells like block level elements */ 
-	table.ui-table-reflow,
-	.ui-table-reflow thead,
-	.ui-table-reflow tfoot,
-	.ui-table-reflow tbody,
-	.ui-table-reflow tr,
-	.ui-table-reflow th,
-	.ui-table-reflow td {
-	    width: 100%;
-	    -webkit-box-sizing: border-box;
-	    -moz-box-sizing: border-box;
-	    box-sizing: border-box;
-	    float: left;
-	    clear: left;
-	}
 	/* Add a fair amount of top margin to visually separate each row when stacked */  
 	.ui-table-reflow tbody th {
 		margin-top: 3em;
@@ -60,8 +45,7 @@
 }
 
 
-
-/* Media query to show as a standard table at 560px (35em x 16px) or wider */ 
+/* Breakpoint to show as a standard table at 560px (35em x 16px) or wider */ 
 @media ( min-width: 35em ) {
 	/* Show the table header rows */ 
 	.ui-table-reflow.ui-responsive td,
@@ -72,23 +56,9 @@
 	.ui-table-reflow.ui-responsive thead th {
 		display: table-cell;
 		margin: 0;
+
 	}
-	/* Undo block styles for IE9 and WP7.5 */ 
-	table.ui-table-reflow.ui-responsive,
-	.ui-table-reflow.ui-responsive thead,
-	.ui-table-reflow.ui-responsive tfoot,
-	.ui-table-reflow.ui-responsive tbody,
-	.ui-table-reflow.ui-responsive tr,
-	.ui-table-reflow.ui-responsive th,
-	.ui-table-reflow.ui-responsive td {
-	    width: auto;
-	    float: none;
-	    clear: none;
-	}
-	/* Make sure the table is 100% width */ 
-	table.ui-table-reflow.ui-responsive {
-	    width: 100%;
-	}
+
 	/* Hide the labels in each cell */ 
 	.ui-table-reflow.ui-responsive td .ui-table-cell-label,
 	.ui-table-reflow.ui-responsive th .ui-table-cell-label { 
@@ -97,4 +67,17 @@
 }
 
 
+/* Hack to make IE9 and WP7.5 treat cells like block level elements, scoped to ui-responsive class */ 
+/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/ 
+@media ( max-width: 35em ) {
+	.ui-table-reflow.ui-responsive td,
+	.ui-table-reflow.ui-responsive th {
+		width: 100%;
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+		float: left;
+		clear: left;
+	}
+}
 
diff --git a/docs/demos/tables/financial-grouped-reflow.html b/docs/demos/tables/financial-grouped-reflow.html
@@ -13,8 +13,12 @@
 	<!-- We're using a style block to make it easy to view the custom styles -->
 	<!-- In production, these should be added to an custom.css file loaded in the head -->
 	<style>
+		.th-groups th {
+			background-color:rgba(0,0,0,0.07);
+			border-right:1px solid #fff;
+			text-align:center;
+		}
 		@media screen and ( max-width: 72em ) {
-
 		 /* Style the first cell in a row in a dark bar */ 
 		.financial-table-reflow th:first-child
 		 { 
@@ -56,6 +60,19 @@
 				display: none;
 			}
 		}
+	/* Hack to make IE9 and WP7.5 treat cells like block level elements */ 
+	/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/ 
+	@media ( max-width: 72em ) {
+		.financial-table-reflow td,
+		.financial-table-reflow th {
+			width: 100%;
+			-webkit-box-sizing: border-box;
+			-moz-box-sizing: border-box;
+			box-sizing: border-box;
+			float: left;
+			clear: left;
+		}
+	}
 	</style>
 </head> 
 <body> 
diff --git a/docs/demos/tables/movie-list.html b/docs/demos/tables/movie-list.html
@@ -100,6 +100,19 @@
       display: none;
     }
   }
+	/* Hack to make IE9 and WP7.5 treat cells like block level elements */ 
+	/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/ 
+	@media ( max-width: 40em ) {
+		.movie-list td,
+		.movie-list th {
+			width: 100%;
+			-webkit-box-sizing: border-box;
+			-moz-box-sizing: border-box;
+			box-sizing: border-box;
+			float: left;
+			clear: left;
+		}
+	}
   </style>
 </head> 
 <body> 
diff --git a/docs/tables/table-reflow.html b/docs/tables/table-reflow.html
@@ -24,9 +24,7 @@ <h1>Table: Reflow</h1>
 
    <div data-role="content">
      
-        <h2>Reflow table mode</h2>
-
-
+    <h2>Reflow table mode</h2>
 	<p>The reflow table mode works by collapsing the table columns into a stacked presentation that looks like blocks of label/data pairs for each row. Since the HTML source order of a table prohibits styling a table to look like this,  the plugin dynamically adds a bit of  markup to make the display work (without affecting accessibility). Here is a demo of a basic table using reflow mode:</p>
 
 
@@ -166,6 +164,8 @@ <h3>Making the table responsive</h3>
 		<p>It's best to use a <code>class</code> on the table to apply the breakpoint. Add these rules to your custom stylesheet that is included in the <code>head</code> of the page. We recommend creating a set of custom breakpoint classes that can be used to apply standard table breakpoints in your project.</p>
 		
 		<p>In the example above, we're assuming there is a class of <code>my-custom-breakpoint</code> added to the table to apply the breakpoint. Each of the rules in the custom media query are scoped against that table class to target only tables that have the <code>my-custom-breakpoint</code> class.</p>
+		
+		<p>In order for this technique to work, a browser must support media queries and the ability to style table cells as block-level elements. In testing, most popular desktop and mobile browsers meet these criteria, but older versions of Internet Explorer (8 and older) 	 fall back to a normal table presentation. IE 9 can support this technique but there are a few additional styles needed so we recommend applying these in a <code>max-width</code> media query to only apply them below the table presentation because they are hard to negate. </p>
 
 		<h3>Choosing a breakpoint</h3>
 		<p>The goal is to determine the minimum width at which the <em>entire table</em> will fit comfortably within the screen. Find this width by populating a table with realistic sample data, then adjust the browser window until the table completely fits and has a bit of extra space to account for rendering differences across devices. This is the natural place to set the breakpoint that switches between the stacked and tabular presentation modes. </p>
