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
StoreStore IncomeIncome ProfitProfit ChangeChange IncomeIncome ProfitProfit ChangeChange IncomeIncome ProfitProfit ChangeChange IncomeIncome ProfitProfit ChangeChange IncomeIncome ProfitProfit ChangeChange
StoreBoston Q1 2012Income2,898 Profit739 Change-5.8% Q2 2012Income3,647 Profit1,354 Change+5.8% Q3 2012Income4,981 Profit2,246 Change+13.4% Q4 2012Income3,457 Profit1,259 Change-3.9% YTD TotalsIncome12,463 Profit6,234 Change+5.9%
StoreChicago Q1 2012Income2,898 Profit739 Change-5.8% Q2 2012Income3,647 Profit1,354 Change+5.8% Q3 2012Income4,981 Profit2,246 Change+13.4% Q4 2012Income3,457 Profit1,259 Change-3.9% YTD TotalsIncome12,463 Profit6,234 Change+5.9%
StoreNYC Q1 2012Income2,898 Profit739 Change-5.8% Q2 2012Income3,647 Profit1,354 Change+5.8% Q3 2012Income4,981 Profit2,246 Change+13.4% Q4 2012Income3,457 Profit1,259 Change-3.9% YTD TotalsIncome12,463 Profit6,234 Change+5.9%