Creating a design for responsive tables is challenging for all template sytems. J1 Template supports a new design for responsive tables based on the Bootstrap framework.
The approach is using 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
For sure, the solution provided by J1 Template for responsive tables are a compromise. To fit the everyday needs for tables, viewed well on desktop and mobile devices, two types of responsive tables are implemented by the J1 Template system:
| Style | Type | Description |
|---|---|---|
| Bootstap Table | Bootstap tables are used by J1 Template for default. Those tables are using the responsive text feature (see Typography) and classic Bootstrap table styles with no additional CSS classes applied. For smaller viewports, the text scales down and should automatically fit the cells. The default text size for tables is level 300 |
| Responsive Table | If adding the class |
| 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.
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 |
Responsive font 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.
...
|===| 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 Tables
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 |
What next
J1 Template offers unique functionalities in compare to other templates for Jekyll available on the market — Themes for J1 Template is one of them. J1 Themes are based on the framework Bootstrap of version V5. J1 themes for Bootstrap enable the presentation of different skins of the same site based on already prepared CSS templates for Bootstrap.
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 already defined in Bootstrap to customize content individually for a seamless integration in existing webs.
Check out what the Theme Feature can do for modern static websites. Experience the functionality checking the preview page at Bootstrap Themes!