A responsive table is a table that looks good on every screen size — big desktop monitors, laptops, tablets, and small mobile phones. Building tables that work well on every device is hard, and many template systems struggle with it. The J1 Template offers a fresh design for responsive tables that builds on top of Bootstrap.
The design uses simple CSS styles together with the standard Bootstrap table classes. This keeps the markup easy to write and makes sure your tables look good in every modern browser, on every device.
Table types
The J1 Template provides two types of responsive tables. Pick the one that fits your content best:
| Style | Type | Description |
|---|---|---|
| Bootstrap Table | This is the default table used by the J1 Template. It uses the standard Bootstrap table classes and adds responsive text (see Typography). On smaller screens, the text size shrinks automatically so the columns still fit. The default text size is |
| Responsive Table | If you add the class |
| Want to see the responsive design in action? On a desktop, just drag the corner of your browser window and make it narrower than 768 pixels — that is the size at which the table layout switches to the mobile or tablet view. |
Bootstrap Tables (striped)
Standard Bootstrap tables are perfect for documentation pages. The two-column tables below show some Jekyll variables you can use to build your content pages.
Fixed font size
On small screens, a Bootstrap table can scroll sideways so all columns stay visible. On bigger screens (above the chosen breakpoint), the table fits without scrolling.
no-rtext[cols="4a,8a", options="header", width="100%", role="table-striped 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-striped 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 (striped)
On small screens, the J1 responsive table hides the column header and turns the rows on their side. Each cell shows its column name first, then the cell value. The result is a list of label-and-value pairs that is easy to read on a phone.
[cols="4a,8a", options="header", width="100%", role="table-striped 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 |
Responsive Tables (NOT striped)
[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
The J1 Template offers many features that other Jekyll templates do not. Themes are one of them. A theme is a set of styles — a skin - that changes the look of your whole website at once.
J1 themes are based on Bootstrap (version 5). Using a theme makes sure your site looks consistent across every page and every modern browser: the same fonts, colors, table styles, and form elements everywhere. You can also use the built-in Bootstrap CSS classes to fine-tune the design on your own.
Want to see what themes can do for a modern static website? Try the preview page Bootstrap Themes.