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.
See Add Tables for initial instructions on how to add tables to your site using the editing (WYSIWYG) toolbar, including instructions on how to add and configure table headers and scope. Properly-configured table headers and scope are important for both responsive behavior and accessibility!
About Responsive Tables
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 necessary; not recommended)
If you have any tables without a full set of headers (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.
If your data table has a complex layout with multiple layers of headers, we recommend that you use the headers, col, colgroup, and other advanced table structure tags to associate each data cell with all of the appropriate headers (see Add Tables for instructions). If this results in improper display at narrower widths, you may need to disable the responsive behavior for that table.
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. We do not recommend this unless every table on your site is complex or non-standard.
