Responsive Table Shortcode

Tables are a great way to organize data to make it readable. Due to the nature of tables needing space to display data correctly they are difficult to make responsive.

Note: Responsive design allows the layout of page elements to change in order to display in a variety of devices and screen sizes.

Large tables are often problematic; they can’t always adjust to the available space on the screen automatically. If the minimum table width is bigger than the width of the intended content area, the table will not fit. Unfortunately, this can lead to content being cut off on small screens, such as phones and tablets. The responsive table shortcode will add a horizontal scroll bar to large tables so the content is scrollable and accessible on smaller screens.

The ability to scroll a table in the Responsive Table Shortcode can be controlled by setting a breakpoint value. The breakpoint value is the width of the browser window when the table scroll interface elements will appear. The breakpoint value should be set to the approximate pixel width of the table.

Tip: You will find a list of shortcodes by clicking "More information about text formats" at the bottom right under the WYSIWYG editor.