line_graphic_business_07

RESPONSIVE TABLE MODES

RESPONSIVE LAYOUT OPTIONS FOR BASIC TABLES

Making HTML tables responsive to changes in screen sizes or the width of the parent element that holds the table has always been a complicated matter, due to the rather “fixed” structure of rows and columns.

While the column width can be somewhat adjusted based on the overall available width of the table, there is a limit as to how narrow a column can become, until its content simply gets unreadable.

The following examples show how a table can be displayed when the available width for the table is insufficient to display all columns next to each other, without making the table “break out” of its parent element.

STANDARD TABLE MODE

RESPONSIVE LAYOUT OPTIONS FOR BASIC TABLES

Provided you are viewing this page one a screen large enough, the first table below will be displayed in its normal (intended) table layout, without any adjustments for lack of screen size. All other tables below this one have been intentionally placed into a column that is too narrow to accommodate the full table width, therefore triggering a pre-selected “responsive” behavior.

By default, a “responsive” behavior will be triggered whenever the width of the container element surrounding the table drops below 640 pixels; that number can be adjusted for each table individually.

CategoryBudgetedActualDifference (Amount)Difference (Percent)Last Purchase
Entertainment300310-10-0.033308-22-2016
Groceries500620-120-0.2408-28-2016
Housing600580200.033308-25-2016
Other4002751250.312508-31-2016
Pets10090100.108-20-2016
Utilities400360400.108-30-2016
Total23002235650.0283-

All responsive table layouts have one limitation: They do NOT reliably work (or don’t work at all) with tables using merged cells, as merged cells by nature interfere with the required changes to the table structure. Therefore, while the table editor does allow the merging of cells, it is not advised to do so, unless your table really just consists of two or three columns, which would fit on basically every screen size.

COLUMN TILES STACK – VERSION I

RESPONSIVE LAYOUT OPTIONS FOR BASIC TABLES

CategoryBudgetedActualDifference (Amount)Difference (Percent)Last Purchase
Entertainment300310-10-0.033308-22-2016
Groceries500620-120-0.2408-28-2016
Housing600580200.033308-25-2016
Other4002751250.312508-31-2016
Pets10090100.108-20-2016
Utilities400360400.108-30-2016
Total23002235650.0283-

When using this layout as responsive behavior for a table, the table will be “converted” into tiles, where each table row will be displayed as individual tile, and all tiles are simply stacked on top of each other.

Naturally, for tables with a large number of rows, this will result in a potentially very tall stack of tiles, requring excessive scrolling to get past the table itself, in order to view any page content below the table.

For that reason, the height of the tile stack can be limited, either with a fixed pixel value, or as a percentage of the available screen height. An additional scrollbar will be shown for the tile stack, in order to be able to view all tiles.

COLUMN TILES STACK – VERSION II

RESPONSIVE LAYOUT OPTIONS FOR BASIC TABLES

CategoryBudgetedActualDifference (Amount)Difference (Percent)Last Purchase
Entertainment300310-10-0.033308-22-2016
Groceries500620-120-0.2408-28-2016
Housing600580200.033308-25-2016
Other4002751250.312508-31-2016
Pets10090100.108-20-2016
Utilities400360400.108-30-2016
Total23002235650.0283-

When using this layout as responsive behavior for a table, the table will be “converted” into tiles, where each table row will be displayed as individual tile, and all tiles are simply stacked on top of each other.

Naturally, for tables with a large number of rows, this will result in a potentially very tall stack of tiles, requring excessive scrolling to get past the table itself, in order to view any page content below the table.

For that reason, the height of the tile stack can be limited, either with a fixed pixel value, or as a percentage of the available screen height. An additional scrollbar will be shown for the tile stack, in order to be able to view all tiles.

SIMPLE FLEX FLOW TABLE

RESPONSIVE LAYOUT OPTIONS FOR BASIC TABLES

CategoryBudgetedActualDifference (Amount)Difference (Percent)Last Purchase
Entertainment300310-10-0.033308-22-2016
Groceries500620-120-0.2408-28-2016
Housing600580200.033308-25-2016
Other4002751250.312508-31-2016
Pets10090100.108-20-2016
Utilities400360400.108-30-2016
Total23002235650.0283-

This most basic “responsive” layout will simply hide any table content (columns) that does not fit into the surrounding container, and will provide a horizontal scrollbar instead, in order to view that “hidden” part of the table.

ADVANCED FLEX FLIP TABLE

RESPONSIVE LAYOUT OPTIONS FOR BASIC TABLES

CategoryBudgetedActualDifference (Amount)Difference (Percent)Last Purchase
Entertainment300310-10-0.033308-22-2016
Groceries500620-120-0.2408-28-2016
Housing600580200.033308-25-2016
Other4002751250.312508-31-2016
Pets10090100.108-20-2016
Utilities400360400.108-30-2016
Total23002235650.0283-

This “responsive” layout will also hide any table content (columns) that does not fit into the surrounding container, and will provide a horizontal scrollbar as well, in order to view that “hidden” part of the table.

The difference to the similar layout above is that this one also utilizes a fixed first and last column, representing the table header and footer. The “footer” column will be dropped (permanently hidden), if the available table width becomes too small to still show any content between the “header” and “footer” column.

This layout is using the so-called CSS “Flexbox” rules for its desired layout, and will therefore only work on browsers supporting those rules.

SPLIT TABLE

RESPONSIVE LAYOUT OPTIONS FOR BASIC TABLES

CategoryBudgetedActualDifference (Amount)Difference (Percent)Last Purchase
Entertainment300310-10-0.033308-22-2016
Groceries500620-120-0.2408-28-2016
Housing600580200.033308-25-2016
Other4002751250.312508-31-2016
Pets10090100.108-20-2016
Utilities400360400.108-30-2016
Total23002235650.0283-

This “responsive” layout will also hide any table content (columns) that does not fit into the surrounding container, and will provide a horizontal scrollbar as well, in order to view that “hidden” part of the table.

The difference to the similar layout above is that this one also only utilizes a fixed first, representing the table header, while the table footer will be shown normally as last row in the table.

While this layout might look “simple”, it is actually one of the more complex ones, as it relies on JavaScript manipulation and the usage of a 2nd “cloned” table version, while all other responsive table layouts shown above rely on CSS only.

line-banner-16