Tables

Table stack on mobile

Designed using Bootstrap's base .table styling, adding class .table-stack-on-mobile allows for cells to stack on mobile devices, allowing them to be more easily consumed on smaller screens.

This presentation is not always appropriate, and Bootstrap's scrolling .table-responsive can be used in situations where maintaining the tables' horizontal formatting is preferable.

The stacking is made possible by including responsive-table.js after main.js near the closing </body> tag. This script manipulates the table so that it stacks and retains the ability to be read by screen readers and other assistive software as a traditional html table.

                            
                                <script src="./js/responsive-table.js"></script>