Permalink
Browse files

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

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.
  • Loading branch information...
1 parent ef8cd40 commit 942ea922ffc189a149a33448b00600d69ae31203 @toddparker toddparker committed Nov 22, 2012
@@ -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;
+ }
+}
@@ -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>
@@ -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>
@@ -24,9 +24,7 @@
<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 @@
<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>

0 comments on commit 942ea92

Please sign in to comment.