##

Demos

Menu Search

# 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%

- Menu
- Home
- Getting started
- Introduction
- Responsive Web Design
- Page Navigation
- Pages
- Single page
- Multi-page template
- Dialog page
- Navigation
- Linking pages
- PHP redirect demo
- Backbone RequireJS demo
- Transitions
- Themes
- Default theme
- Classic theme
- Buttons & Icons
- Buttons
- Icons
- Icons load script
- CSS Framework
- Grids
- Grids: buttons
- Grids: custom responsive
- Form field containers
- Form hide labels
- Events
- Swipe list items
- Swipe page navigation
- Widgets
- Loader
- Toolbar
- Toolbar: external
- Toolbar: fixed
- Toolbar: fixed external
- Toolbar: persistent
- Navbar
- Tabs
- Panel
- Panel: examples
- Panel: external
- Panel: fixed
- Panel: responsive
- Panel: styling
- Panel: swipe open
- Popup
- Popup: alignment
- Popup: arrow size
- Popup: dynamic
- Popup: iframe
- Popup: image scaling
- Popup outside multi-page
- Listview
- Listview: autocomplete
- Listview: autocomplete remote data
- Listview: autodividers selector
- Listview: responsive grid
- Listview: linkbar
- Collapsible
- Collapsible: dynamic
- Collapsible set
- Controlgroup
- Controlgroup: dynamic
- Table Column Toggle
- Table Column Toggle: example
- Table Column Toggle: heading groups
- Table Column Toggle: options
- Table Reflow
- Table Reflow: heading groups
- Table Reflow: stripes and strokes
- Table Reflow: custom styles
- Filterable
- Form Widgets
- Forms
- Textinput
- Input button
- Checkboxradio: checkbox
- Checkboxradio: radio
- Selectmenu
- Selectmenu: custom
- Selectmenu: custom with filter
- Slider
- Slider: flip toggle switch
- Slider: tooltip
- Rangeslider
- Flipswitch
- Showcase
- Map geolocation demo
- Map list toggle demo

- Getting started
- Introduction
- Responsive Web Design
- Page Navigation
- Pages
- Single page
- Multi-page template
- Dialog page
- Navigation
- Linking pages
- PHP redirect demo
- Backbone RequireJS demo
- Transitions
- Themes
- Default theme
- Classic theme
- Buttons & Icons
- Buttons
- Icons
- Icons load script
- CSS Framework
- Grids
- Grids: buttons
- Grids: custom responsive
- Form field containers
- Form hide labels
- Events
- Swipe list items
- Swipe page navigation
- Widgets
- Loader
- Toolbar
- Toolbar: external
- Toolbar: fixed
- Toolbar: fixed external
- Toolbar: persistent
- Navbar
- Tabs
- Panel
- Panel: examples
- Panel: external
- Panel: fixed
- Panel: responsive
- Panel: styling
- Panel: swipe open
- Popup
- Popup: alignment
- Popup: arrow size
- Popup: dynamic
- Popup: iframe
- Popup: image scaling
- Popup outside multi-page
- Listview
- Listview: autocomplete
- Listview: autocomplete remote data
- Listview: autodividers selector
- Listview: responsive grid
- Listview: linkbar
- Collapsible
- Collapsible: dynamic
- Collapsible set
- Controlgroup
- Controlgroup: dynamic
- Table Column Toggle
- Table Column Toggle: example
- Table Column Toggle: heading groups
- Table Column Toggle: options
- Table Reflow
- Table Reflow: heading groups
- Table Reflow: stripes and strokes
- Table Reflow: custom styles
- Filterable
- Form Widgets
- Forms
- Textinput
- Input button
- Checkboxradio: checkbox
- Checkboxradio: radio
- Selectmenu
- Selectmenu: custom
- Selectmenu: custom with filter
- Slider
- Slider: flip toggle switch
- Slider: tooltip
- Rangeslider
- Flipswitch
- Showcase
- Map geolocation demo
- Map list toggle demo