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.
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.