title: Roundtrip tagline: Responsive Tables description: Enhanced Table styles for J1
Template
tags: [
Template, Roundtrip, Extended, Tables ]
index: [] categories: [ pages ]
flowtext: false
permalink: /pages/public/start/roundtrip/responsive_tables/ regenerate: true
resources: [] resource_options:
- masthead: opacity: 1.0 slides: - url: /assets/images/pages/roundtrip/oleg-magni-1920x1280.png alt: bootstrap-modals
// Enable the Liquid Preprocessor // —————————————————————————– :page-liquid:
// Set other global page attributes here // —————————————————————————–
// Liquid procedures // —————————————————————————– {% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
// Initialize entry document paths // —————————————————————————– {% include {{set_env_entry_document}} init_folders=all %}
// Load tags and urls // —————————————————————————– include::{includedir}/attributes.asciidoc include::{includedir}/attributes.asciidoc include::{includedir}/attributes.asciidoc
// Additional Asciidoc page attributes goes here // —————————————————————————–
// Include sub-documents // —————————————————————————–
Creating a design for responsive tables is challenging. The approch used by J1
Template is based on pure CSS for simplicity and portability to be viewed best on all devices and browsers.
Type of tables¶ ↑
But, for sure, the solution provided is a compromise. To fit the common needs for tables viewed on desktop and mobile devices, three types of responsive tables are implemented:
.Types of responsive tables
- cols=“2a,4a,6a”, options=“header”, width=“100%”, role=“rtable_v table-responsive mt-3”
-
|=============================================================================== |Type |Style |Description
|Bootstrap |`table-responsive` |The adding the class `.table-responsive`, it creates a responsive table based on BS CSS styles. The table will then scroll horizontally on small devices.
|V Table |`rtable_v` |The style `.rtable_v` rebuilds a table. A header is set in invisible and all columns gets vertically stacked as rows.
|H Table |`rtable_h` |The style `.rtable_h` rebuilds a table for multiple columns into a fixed, two column style having only one row. The table header get rewritten stacked and fixed for the first column. All other rows of the previous table are horizontal slideable using a scrollbar or moved on touch.
|===============================================================================
- NOTE
-
¶ ↑
The styles for responsive tables takes effect if the viewport is smaller than 768px for the width (x-axis), typically for small devices like mobiles or tablets.
The styles for V Table or H Table can be combined with Bootstrap responsive tables.
.Example V Table
- source, sh
- cols=“6a,6a”, role=“table-responsive rtable_v”
-
|=============================================== |Variable |Description … |===============================================
¶ ↑
To see the transformation in action, for desktop devices resize the browser window or use a device the viewport is smaller than 768px (mobiles or tablets)
2-column Table¶ ↑
lorem:sentences + lorem:sentences +
- cols=“6a,6a”, options=“header”, width=“100%”, role=“rtable_v table-responsive mt-3”
-
|=============================================================================== |Variable |Description
|`page.content` |The content of the Page, rendered or un-rendered depending upon what Liquid is being processed and what `page` is.
|`page.title` |The title of the Page.
|`page.excerpt` |The un-rendered excerpt of the Page.
|`page.url` |The URL of the Post without the domain, but with a leading slash, e.g. `/2008/12/14/my-post.html`
|`page.date` |The Date assigned to the Post. This can be overridden in a Post's front matter by specifying a new date/time in the format `YYYY-MM-DD HH:MM:SS` (assuming UTC), or `YYYY-MM-DD HH:MM:SS +/-TTTT` (to specify a time zone using an offset from UTC. e.g. `2008-12-14 10:30:00 +0900`).
|`page.id` |An identifier unique to the Post (useful in RSS feeds). e.g. `/2008/12/14/my-post`
|`page.categories` |The list of categories to which this post belongs. Categories are derived from the directory structure above the `_posts` directory. For example, a post at `/work/code/_posts/2008-12-24-closures.md` would have this field set to `['work', 'code']`. These can also be specified in the ../frontmatter/[YAML Front Matter].
|===============================================================================
- cols=“6a,6a”, options=“header”, width=“100%”, role=“rtable_h table-responsive mt-3”
-
|=============================================================================== |Variable |Description
|`page.content` |The content of the Page, rendered or un-rendered depending upon what Liquid is being processed and what `page` is.
|`page.title` |The title of the Page.
|`page.excerpt` |The un-rendered excerpt of the Page.
|`page.url` |The URL of the Post without the domain, but with a leading slash, e.g. `/2008/12/14/my-post.html`
|`page.date` |The Date assigned to the Post. This can be overridden in a Post's front matter by specifying a new date/time in the format `YYYY-MM-DD HH:MM:SS` (assuming UTC), or `YYYY-MM-DD HH:MM:SS +/-TTTT` (to specify a time zone using an offset from UTC. e.g. `2008-12-14 10:30:00 +0900`).
|`page.id` |An identifier unique to the Post (useful in RSS feeds). e.g. `/2008/12/14/my-post`
|`page.categories` |The list of categories to which this post belongs. Categories are derived from the directory structure above the `_posts` directory. For example, a post at `/work/code/_posts/2008-12-24-closures.md` would have this field set to `['work', 'code']`. These can also be specified in the ../frontmatter/[YAML Front Matter].
|===============================================================================
Multi-column Table¶ ↑
lorem:sentences + lorem:sentences +
- cols=“3,2,2,5”, options=“header”, width=“100%”, role=“rtable_v table-responsive mt-3”
-
|=============================================================================== |Parameter |Type |Default |Description
|`background_color` |Hash |`md_white` |The *background_color hash* contains a pair of colors to control the header background as a gradient.
|`background_color.color_1` |Symbolic color | RGB valuess |`md_indigo` |Start value (color) for the gradient used for the header box background. Alternatively, the color can be configured as (hexadecimal) RGB valuess of the form `#RRGGBB`
|`background_color.color_2` |Symbolic color | RGB valuess |`md_indigo` |End value (color) for the gradient used for the header box background. Alternatively, the color can be configured as (hexadecimal) RGB valuess of the form `#RRGGBB`
|===============================================================================
- cols=“3,2,2,5”, options=“header”, width=“100%”, role=“rtable_h table-responsive mt-3”
-
|=============================================================================== |Parameter |Type |Default |Description
|`background_color` |Hash |`md_white` |The *background_color hash* contains a pair of colors to control the header background as a gradient.
|`background_color.color_1` |Symbolic color | RGB valuess |`md_indigo` |Start value (color) for the gradient used for the header box background. Alternatively, the color can be configured as (hexadecimal) RGB valuess of the form `#RRGGBB`
|`background_color.color_2` |Symbolic color | RGB valuess |`md_indigo` |End value (color) for the gradient used for the header box background. Alternatively, the color can be configured as (hexadecimal) RGB valuess of the form `#RRGGBB`
|===============================================================================
What's next?¶ ↑
Hopefully you've enjoyed exploring all the possibilities
J1
offers sofar. An interesting feature may using themes. But much, much more can theJ1
do for your Web Site.Check out what themes can do: {roundtrip-themes}[J1 Theme feature]!