Responsive Tables

Overview

See Add Tables for initial instructions on how to add tables to your site using the editing (WYSIWYG) toolbar.

Tables built on the Open Berkeley platform are designed to be "responsive," meaning they will adjust for optimal display on all devices, including mobile/tablet.

A standard data table will typically have a header row, and corresponding data cells. On a typical desktop view, a table like this will have all the columns lined up in a row, from left to right, with the data cells underneath:

When viewed on a smaller mobile/tablet screen, the same table will adjust so that the columns and rows are stacked, and will still align the text of the header cells with the corresponding data cells:

Disable Responsive Table Functionality

If you have a site that uses any non-standard tables (not recommended for accessibility and usability) that result in the cells not displaying as expected in the responsive view, then the responsive tables functionality can be disabled if need be.

Individual Tables

If you need to disable the responsive table functionality for individual tables, there is an optional HTML class called "openberkeley-not-responsive" that can be added to the table. To add the class to a table, click on the "HTML" button in the editing toolbar. Then, find the "<table>" in the HTML, and add the above class in the following format preceded by "class=":

<table class="openberkeley-not-responsive">

Site-Wide

If you need to disable the responsive table functionality across your entire site, navigate to your Site Builder Dashboard, then under "Other Administration", click the "Theme Settings" link. Under "Responsive Tables", check the box that says  "Disable Responsive Tables", then hit Save.