Jekyll One

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

5 Minutes to read

Table types

But, for sure, the solutions provided are a compromise. To fit the everyday needs for tables viewed on desktop and mobile devices, two types of responsive tables are implemented by J1 Template:

Table 1. Types of responsive tables
Style Type Description

rtable

B Table

B Tables are used by J1 Template for default. Those tables are using the responsive text feature (see Typography) of Bootstrap with no additional CSS classes applied. For smaller viewports, the text scales down and should fit the cells automatically. The default text size for J1 is r-text-300.

table-responsive

R Table

If adding the class table-responsive, it creates a responsive table based on additional Bootstrap CSS styles. Making any table responsive across all viewports, the additional class table-responsive is to applied. For specific Bootstrap breakpoints, the breakpoint classes table-responsive-{lg | sm | md | lg | xl} are available to have better control on what viewport sizes tables are being transformed.

To see the transformation on a table in action, resize for desktop devices the browser window smaller than 768px to transform for mobiles or tablets.

Bootstrap Tables

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

Fixed font size

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.

Bootstrap using fixed text size no-rtext
[cols="4a,8a", options="header", width="100%", role="table-responsive-md no-rtext"]
|===
|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.
...
|===
Table 2. Bootstrap, fixed text size no-rtext
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 font size

Bootstrap using responsive text size
[cols="4a,8a", options="header", width="100%", role="table-responsive-md"]
|===
|Variable |Description
|`page.content`
|The content of the Page, rendered or un-rendered
depending upon what Liquid is being processed and what `page` is.
...
|===
Table 3. Bootstrap, responsive text size
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 get vertically stacked as rows.

R Table using responsive text size
[cols="4a,8a", options="header", width="100%", role="rtable"]
|===
|Variable |Description
|`page.content`
|The content of the Page, rendered or un-rendered
depending upon what Liquid is being processed and what `page` is.
...
|===
Table 4. R Table, responsive text size
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).

R Table using fixed font size
[cols="4a,8a", options="header", width="100%", role="rtable no-rtext"]
|===
|Variable |Description
|`page.content`
|The content of the Page, rendered or un-rendered
depending upon what Liquid is being processed and what `page` is.
...
|===
Table 5. R Table, stacked, fixed text size no-rtext
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).

What next

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

J1 Template offers various unique functionalities compared to other Jekyll themes and templates. Bootstrap themes for the J1 Template are based on the free and open-source CSS front-end framework Bootstrap of version V5. The Bootstrap themes for the J1 enable the presentation of different skins of the same site using already prepared Bootstrap CSS templates.

Using Bootstrap themes results in a uniform appearance for the content in terms of the overall layout, text, tables, and form elements across all modern web browsers available on the market. In addition, developers can take advantage of CSS classes defined in Bootstrap to customize content individually.

Check out what themes can do. Have a look at the Bootstrap Themes feature!