Responsive Tables

If you run into a problem, have questions about how something works, or have questions about functionality that is not covered, email webservices@uoregon.edu to ask for assistance.

Ask for Assistance


Getting Started Tip

A responsive table is a table that breaks down to one column while retaining its row/column structure on mobile devices. If you do not need to maintain the row/column structure, then you should probably use a grid.

Grids

If you are on a computer and want to see what your responsive table will look like on a mobile device, you can adjust the width of your internet brower's window (drag your browser window from the left to make it very narrow) or zoom in on the  view.


Add Responsive Tables

To add a responsive table, you will need to click on the template icon and choose the option on the left labeled "Responsive Table."

 

Add responsive table template

Click the Insert Template button at the bottom right and it will automatically insert a new responsive table.

 

Responsive tables consist of column headers and rows of data.


Add Rows

To add responsive table rows one row at a time, click on the Green + button located at the top right corner of your responsive table box. This will add a responsive table row just below your last current responsive table row.

 


Add Columns

To add responsive table columns one at a time, click on the Green + button located to the right of the header row. This will add a responsive table column to the right of your last current responsive table column.

 

Note: Responsive tables will exceed the page width if there are too many columns.  This is because all columns have a minimum width to prevent words from being squished into a vertical one letter wide format.

 


Rearrange Rows

To rearrange rows, click on the cross icon with arrows for the row you want to move and drag that row up or down to the place you want it to be and unclick. That should move the row to the correct place and move all rows one place further down the table.

 


Rearrange Columns

To rearrange columns, click on the cross icon with arrows for the column you want to move and drag that column left or right to the place you want it to be and unclick. That should move the column to the correct place and move all columns one place further to the right in the table.

 


Delete Rows

To remove a table row, click the Red X button on the far right hand side of that particular row and it will delete that entire row from the responsive table.

 


Delete Columns

To remove a table column, click the Red X button on the right hand side of that column header and it will delete that entire column from the responsive table.

 


Delete Responsive Table

To remove the entire responsive table, click on the Red X button at the upper right corner of the entire responsive table box and the entire responsive table will be deleted.

 


Responsive Table Styles

There are two types of responsive tables—regular and data. A regular responsive table is for a basic table with a few rows and a few columns, which breaks down into one column while keeping the header information attached to the cell data. A data table is for significant, mathematic tabular data, which compresses but retains its shape on mobile devices but allows for you to scroll left and right to see the information.

 

Example of a Responsive Table

Header 1 Header 2 Header 3 Header 4 Header 5

Cell 1

This is a line of text showing how the cells will stack when placed inside of a responsive table.

Cell 2

This is a line of text showing how the cells will stack when placed inside of a responsive table.

Cell 3

This is a line of text showing how the cells will stack when placed inside of a responsive table.

Cell 4

This is a line of text showing how the cells will stack when placed inside of a responsive table.

Cell 5

This is a line of text showing how the cells will stack when placed inside of a responsive table.

Cell 6 Cell 7 Cell 8 Cell 9 Cell 10
Cell 11 Cell 12 Cell 13 Cell 14 Cell 15
Cell 16 Cell 17 Cell 18 Cell 19 Cell 20

Example of a Responsive Data Table 

Header 1 Header 2 Header 3 Header 4 Header 4

Cell 1

This is a line of text showing how the cells will scroll when placed inside of a responsive table.

Cell 2

This is a line of text showing how the cells will scroll when placed inside of a responsive table.

Cell 3

This is a line of text showing how the cells will scroll when placed inside of a responsive table.

Cell 4

This is a line of text showing how the cells will scroll when placed inside of a responsive table.

Cell 5

This is a line of text showing how the cells will scroll when placed inside of a responsive table.

Cell 6 Cell 7 Cell 8 Cell 9 Cell 10
Cell 11 Cell 12 Cell 13 Cell 14 Cell 15
Cell 16 Cell 17 Cell 18 Cell 19 Cell 20

Responsive Table Modifiers

Responsive tables are automatically defaulted to have zebra striping (alternative rows of light and dark backgrounds) and no borders. Using the modifiers, you can remove the zebra striping or add borders to your responsive tables.