title: Roundtrip tagline: responsive tables date: 2020-11-09 00:00:00 +100 description: >

Creating a design for responsive tables is challenging. The approach used by
J1 Template is based on pure CSS on top of the classic Bootstrap styles for
simplicity and portability to be viewed best on all devices and browsers.

categories: [ Roundtrip ] tags: [ Introduction, Bootstrap, Table, Extension ]

flowtext: false fam_menu_id: page_ctrl_simple

permalink: /pages/public/learn/roundtrip/responsive_tables/ regenerate: false

resources: [ rtable, rouge ] resource_options:

- attic:
    padding_top:                      400
    padding_bottom:                   50
    opacity:                          0.7
    slides:
      - url:                          /assets/images/pages/roundtrip/tables-1920x1280-bw.jpg
        alt:                          Photo by Markus Spiske on Unsplash
        badge:
          type:                       unsplash
          author:                     Markus Spiske
          href:                       https://unsplash.com/@markusspiske/portfolio

// Page Initializer // ============================================================================= // Enable the Liquid Preprocessor :page-liquid:

// Set (local) page attributes here // —————————————————————————– // :page–attr: <attr-value> :images-dir: {imagesdir}/pages/roundtrip/100_present_images

// Load Liquid procedures // —————————————————————————– {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}

// Load page attributes // —————————————————————————– {% include {{load_attributes}} scope=“all” %}

// Page content // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Creating a design for responsive tables is challenging. The approach used by J1 Template is based on pure CSS on top of the classic Bootstrap styles for simplicity and portability to be viewed best on all devices and browsers.

Table types

But, for sure, the solution provided is a compromise. To fit the everyday needs for tables viewed on desktop and mobile devices, three types of responsive tables are implemented:

.Types of responsive tables

cols=“3a,3a,6a”, options=“header”, width=“100%”, role=“table-responsive mt-3”

|=============================================================================== |Type |Style |Description

|J Table (default) |`r-text-xxx` |J Tables are used by J1 Template for default. Those tables are using the *responsive text* feature (see {roundtrip-typography}[Typography]) with no additional CSS classes to be applied. For smaller viewports, the text scales down and should fit the cells automatically. The default text size for J1 is `r-text-300`.

|B Table (Bootstrap) |`table-responsive` |The adding the class `table-responsive`, it creates a responsive table based on Bootstrap CSS styles. The table will then scroll horizontally on small devices. Making any table responsive across all viewports, the additional class `table-responsive` is to applied. For specific (Bootstrap) breakpoints, the classes `table-responsive-lg{-sm|-md|-lg|-xl}` are available to have better control on what viewport sizes tables are being transformed.

|F Table (fixed) |`no-rtext` |If the responsive text feature from J1 is not wanted, the CSS class `no-rtext` is to be applied. J tables are not responsive per default, but in combination with the CSS class `table-responsive{-sm|-md|-lg|-xl` from Bootstrap, this type behaves like classic Bootstrap responsive tables (see above) but no responsive text is used.

|R Tables (stacked) |`rtable` |The style `rtable` rebuilds a table. The header is set to invisible and all columns gets vertically *stacked as rows*. The rebuild of responsive tables takes effect if the viewport (window size) is smaller than 992px for the width (x-axis); typical for small devices like tablets or mobiles.

|===============================================================================

To see the transformation o table in action, resize for desktop devices the browser window or use a device the viewport is smaller than 768px (mobiles or tablets).

Tables 2-column

Tables are widely used for documentation pages. Below, simple 2-column tables are used to explain some of the Jekyll variables that can be used for templating your content pages.

Bootstrap tables

Bootstrap tables support tables to be scrolled horizontally on smaller viewports. From a specified breakpoint and up, the table will behave normally and do not scroll horizontally.

.Example, Bootstrap using fixed text size `no-rtext`

source, prometheus, role=“r-text-200 noclip”

cols=“6,6”, options=“header”, width=“100%”, role=“table-responsive no-rtext”

|============================================================================= |Variable |Description … |=============================================================================


.Bootstrap, fixed text size `no-rtext`

cols=“6a,6a”, options=“header”, width=“100%”, role=“table-responsive no-rtext 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.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`).

|===============================================================================

.Example, Bootstrap using responsive text size

source, prometheus, role=“r-text-200 noclip”

cols=“6,6”, options=“header”, width=“100%”, role=“table-responsive”

|==================================================================== |Variable |Description … |====================================================================


.Bootstrap, responsive text size

cols=“6a,6a”, options=“header”, width=“100%”, role=“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.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`).

|===============================================================================

Responsive tables

Responsive tables rebuild a table. The header is set to invisible, and all columns gets vertically *stacked as rows*.

.Example, R Table using responsive text size

source, prometheus, role=“r-text-200 noclip”

cols=“6,6”, options=“header”, width=“100%”, role=“rtable”

|========================================================== |Variable |Description … |==========================================================


.R Table, responsive text size

cols=“6a,6a”, options=“header”, width=“100%”, role=“rtable 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.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`).

|===============================================================================

.Example, R Table using fixed font size

source, prometheus, role=“r-text-200 noclip”

cols=“6,6”, options=“header”, width=“100%”, role=“rtable no-rtext”

|=================================================================== |Variable |Description … |===================================================================


.R Table, stacked, fixed text size `no-rtext`

cols=“6a,6a”, options=“header”, width=“100%”, role=“rtable no-rtext 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.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`).

|===============================================================================

Tables multi-column

Responsive Bootstrap tables support tables to be scrolled horizontally on smaller viewports. Making any table responsive across all viewports, the additional class `rtable` is used. For specific (Bootstrap) breakpoints, the classes `rtable{-sm|-md|-lg|-xl}` are available to better control over what viewport sizes table are transformed. From a specified breakpoint and up, the table will behave normally and do not scroll horizontally.

Bootstrap tables

Bootstrap responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

.Example, Bootstrap using fixed text size `no-rtext`

source, prometheus, role=“r-text-200 noclip”

cols=“,,,,”, options=“header”, width=“100%”, role=“table-responsive no-rtext”

|=============================================================================== |Parameter |Type |Default |Description |Example … |===============================================================================


.Bootstrap, fixed text size `no-rtext`

cols=“2,2,2,3,3”, options=“header”, width=“100%”, role=“table-responsive no-rtext mt-3”

|=============================================================================== |Parameter |Type |Default |Description |Example

|`color` |Hash |`md_white` |The background_color hash contains a pair of colors to control the header background as a gradient. |The background_color hash contains a pair of colors to control the header background as a gradient.

|`background_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` |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`

|===============================================================================

.Example, Bootstrap using responsive text size

source, prometheus, role=“r-text-200 noclip”

cols=“,,,,”, options=“header”, width=“100%”, role=“table-responsive”

|===================================================================== |Parameter |Type |Default |Description |Example … |=====================================================================


.Bootstrap, responsive text size

cols=“2,2,2,3,3”, options=“header”, width=“100%”, role=“table-responsive mt-3”

|=============================================================================== |Parameter |Type |Default |Description |Example

|`color` |Hash |`md_white` |The background_color hash contains a pair of colors to control the header background as a gradient. |The background_color hash contains a pair of colors to control the header background as a gradient.

|`background_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` |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`

|===============================================================================

Responsive tables

.Example, R Table using fixed text size `no-rtext`

source, prometheus, role=“r-text-200 noclip”

cols=“,,,,”, options=“header”, width=“100%”, role=“rtable no-rtext”

|==================================================================== |Parameter |Type |Default |Description |Example … |====================================================================


.R Table, fixed text size `no-rtext`

cols=“2,2,2,3,3”, options=“header”, width=“100%”, role=“rtable no-rtext mt-3”

|=============================================================================== |Parameter |Type |Default |Description |Example

|`color` |Hash |`md_white` |The background_color hash contains a pair of colors to control the header background as a gradient. |The background_color hash contains a pair of colors to control the header background as a gradient.

|`background_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` |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`

|===============================================================================

.Example, R Table using fixed text size `no-rtext`

source, prometheus, role=“r-text-200 noclip”

cols=“,,,,”, options=“header”, width=“100%”, role=“rtable no-rtext”

|==================================================================== |Parameter |Type |Default |Description |Example … |====================================================================


.R Table, responsive text size

cols=“2,2,2,3,3”, options=“header”, width=“100%”, role=“rtable mt-3”

|=============================================================================== |Parameter |Type |Default |Description |Example

|`color` |Hash |`md_white` |The background_color hash contains a pair of colors to control the header background as a gradient. |The background_color hash contains a pair of colors to control the header background as a gradient.

|`background_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` |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`

|===============================================================================

Whats next

Expectedly you've enjoyed exploring all the possibilities J1 offers so far. An exciting feature may the use of themes. But much, much more can the J1 do for your Web Site.

Check out what themes can do. Have a look at the {roundtrip-themes}[BS themes] feature!