Body
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
Task: 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.