Responsive web design allows a site to be presented with an optimal viewing experience across a variety of screen sizes, such as mobile phones and tablets. The instructions below will ensure that any tables you build in OPenScholar will behave responsively.
To Create a Responsive Table
- Go to the edit area of the page where you want to insert a table
-
Place the cursor in the body of the text area where you want to insert a table and click on the Table icon in the WYSIWYG (text) editor
-
Insert the amount of columns and rows you would like for your table and click OK.
For this example we will be using 2 columns and 3 rows.
-
Add text to your table and then click on the Source link below the text area.
-
To make your table responsive, you must alter some html code.
(a.) Within the HTML, replace code <table border="1"...> with <table class="os-datatable">
(b.) Replace the first set of <td>,</td> tags to <th>,</th> as shown below.
The HTML prior to making changes will look similar to this:
After making the HTML changes, it needs to appear like this:
- Once completed, click the Source button.
-
Click save. Your table should now reflect a responsive behavior once your screen size is reduced.
Creating Table Borders
To add or change a border to an existing table:
- Edit the page containing the table
-
Place your cursor within any table cell and right-click on your mouse & select Table Properties.
-
In the Border Size box add the desired number (pixel width)
- Click OK
-
Click Save and view results
To add a border to a new table, follow the steps you would take to create a table and when adding columns and rows, add the number (1) to the Border box.
Updated: 25July18