Summary

A brief explanation of how responsive tables perform in UNH Drupal pages. A brief how-to for adding a responsive table to a page is included below.

Details

Table responsiveness means that the table will expand and contract as needed depending on the size of the browser window (large screen, tablet, smart phone, etc.). The action of the table will adjust to the content contained within individual table cells, which is preferred - do not set specific widths on the table or columns!

If the browser window is too small to display all of the table data then a horizontal scroll bar will appear, as demonstrated in the image to the left.

Below is a demonstration of responsiveness using the Table (Zebra) template available via the Templates button in the WYSIWYG editor. Note how the table changes as the browser window is reduced:

How-To

Insert a responsive table

Step 1 - While working in the WYSIWYG editor, click on the Templates button

Step 2 - Select the table type you would like to use

Step 3 - Add/remove rows and columns and edit the placeholder content as needed
 

Outcome

A responsive table has been created.

Want to learn more?

Additional help on this and other related topics is available during a regularly scheduled Drupal/Sites@USNH/Calendar Walk-in/Zoom-in Session. More information, including a complete schedule, is available at Drupal/Sites@USNH/Website Tools - Virtual Walk-in Session.

Need additional help?

If you have any additional questions, please fill out the Website & Mobile Development & Design Support Form.