Building Responsive Data Tables

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

  1. Go to the edit area of the page where you want to insert a table
  2. 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) editoradd a table
     
  3. 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.

    table properties
     
  4. Add text to your table and then click on the Source link below the text area.
    table body
  5. 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: 

    replace code

     

    After making the HTML changes, it needs to appear like this:

    after code change

     

  6. Once completed, click the Source button.
  7. Click save. Your table should now reflect a responsive behavior once your screen size is reduced.

     edited example

Creating Table Borders

To add or change a border to an existing table:

  1. Edit the page containing the table
  2. Place your cursor within any table cell and right-click on your mouse & select Table Properties.
    table properties
     
  3. In the Border Size box add the desired number (pixel width)
    table properties
  4. Click OK
  5. Click Save and view results
    border

    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