Table Reflow: Heading groups
This table will stack the data into label value pairs at narrow widths. The grouped column headings are displayed as subheadings between data sets. The screen needs to be wide before it shows the tabular format so the media query is set to 72em (1,152px). There are custom styles for the first row to set the background to dark gray with white text and hide the label so it looks more like a section divider.
Q1 2012 | Q2 2012 | Q3 2012 | Q4 2012 | YTD Totals | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Store | Income | Profit | Change | Income | Profit | Change | Income | Profit | Change | Income | Profit | Change | Income | Profit | Change |
Boston | 2,898 | 739 | -5.8% | 3,647 | 1,354 | +5.8% | 4,981 | 2,246 | +13.4% | 3,457 | 1,259 | -3.9% | 12,463 | 6,234 | +5.9% |
Chicago | 2,898 | 739 | -5.8% | 3,647 | 1,354 | +5.8% | 4,981 | 2,246 | +13.4% | 3,457 | 1,259 | -3.9% | 12,463 | 6,234 | +5.9% |
NYC | 2,898 | 739 | -5.8% | 3,647 | 1,354 | +5.8% | 4,981 | 2,246 | +13.4% | 3,457 | 1,259 | -3.9% | 12,463 | 6,234 | +5.9% |