Creating a design for responsive tables is challenging. The Jekyll Theme JekyllOne supports a new design for responsive tables based on Bootstrap. The approach used by J1 Theme 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.
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 Theme:
Type | Style | Description |
---|---|---|
R Table (J1) |
| J Table are used by J1 Theme for default. Those tables are using the responsive text feature (see 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 |
B Table (Bootstrap) |
| If adding the class |
To see the transformation on a table in action, resize for desktop devices the browser window or use a device the viewport is smaller than 768px (mobiles or tablets).
Table 2-column
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.
Bootstrap table
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.
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.
...
|===
Variable | Description |
---|---|
| The content of the Page, rendered or un-rendered depending upon what Liquid is being processed and what |
| The title of the Page. |
| 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 |
[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.
...
|===
Variable | Description |
---|---|
| The content of the Page, rendered or un-rendered depending upon what Liquid is being processed and what |
| The title of the Page. |
| 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 |
Responsive table
Responsive tables rebuild a table. The header is set to invisible, and all columns get vertically stacked as rows.
[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.
...
|===
Variable | Description |
---|---|
| The content of the Page, rendered or un-rendered depending upon what Liquid is being processed and what |
| The title of the Page. |
| 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 |
[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.
...
|===
Variable | Description |
---|---|
| The content of the Page, rendered or un-rendered depending upon what Liquid is being processed and what |
| The title of the Page. |
| 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 |
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 table-responsive
is used. For specific (Bootstrap) breakpoints, the classes table-responsive-{ 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 table
Bootstrap responsive tables make use of the CSS overflow-x: auto
, 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.
no-rtext
[cols=",,,,", options="header", width="100%", role="table-responsive-lg no-rtext" mt-4"]
|===
|Parameter |Type |Default |Description |Example
...
|===
Parameter | Type | Default | Description | Example |
---|---|---|---|---|
| Hash |
| 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. |
| Symbolic color | RGB valuess |
| 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 | 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 |
[cols=",,,,", options="header", width="100%", role="table-responsive"]
|===
|Parameter |Type |Default |Description |Example
...
|===
Parameter | Type | Default | Description | Example |
---|---|---|---|---|
| Hash |
| 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. |
| Symbolic color | RGB valuess |
| 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 | 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 |
Responsive table
no-rtext
[cols="2a,2a,2a,3a,3a", options="header", width="100%", role="rtable no-rtext mt-4"]
|===
|Parameter |Type |Default |Description |Example
...
|===
Parameter | Type | Default | Description | Example |
---|---|---|---|---|
| Hash |
| 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. |
| Symbolic color | RGB valuess |
| 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 | 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 |
[cols="2a,2a,2a,3a,3a", options="header", width="100%", role="rtable mt-4"]
|===
|Parameter |Type |Default |Description |Example
...
|===
Parameter | Type | Default | Description | Example |
---|---|---|---|---|
| Hash |
| 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. |
| Symbolic color | RGB valuess |
| 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 | 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 |
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 Theme offers various unique functionalities compared to other Jekyll themes and templates. Bootstrap themes for the J1 Theme 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 versions (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!