Manage wide table viewing on a small screen - On Premises 6.4

Magellan

To stop a wide table from adjusting its width when it is displayed on a small screen, you need to do three things:

  • Specify a paragraph style for wide tables (e.g. widetable) in Author-it and apply the style to a blank line directly above the (wide) table. This style name is included in the output files so can be used to identify the wide table.
  • Specify that the table container shows scrollbars when the screen is too small to show the entire table width.
  • Set the minimum width of the table.

To manage wide table viewing on a small screen:

  1. In Author-it, add a blank line above the table and apply the unique `widetable` style created solely for this purpose.

    This ensures the `widetable` property is included in the table css class, and can be used to find the relevant tables.

    Note: No special definition is required for this widetable style, though you might want to have it green or red, for example, so it is obvious in the topic. As long as it is applied to an empty line, the extra blank space is removed when publishing to Magellan.

  2. Open the contentstyles.css file in your theme folder.
  3. Within the TABLES section, add the css selector to find responsive wide tables with the unique style you created in Author-it:

    .table-responsive.widetable

    This selector chooses the container of the table.

  4. Add the following properties to the selector:
    • overflow-x: auto; - makes sure that all the text in the table is displayed.
    • scrollbar-width: thin; - defines the width of the scrollbar.
    • border:none; - hides the extra border around the table.

      The full definition is:

      .table-responsive.widetable {

      overflow-x: auto;

      scrollbar-width: thin;

      border:none;

      }

  5. To set the minimum width you need to add a second selector to identify the table itself:

    .table-responsive.widetable table

  6. Add the following code to set the table minimum width and bottom margin:

    min-width: 800px;

    margin-bottom:5px;

    The full definition is:

    .table-responsive.widetable table {

    min-width: 800px;

    margin-bottom:5px;

    }

    Using both these definitions gives wide tables a scrollbar when the screen gets smaller than 800pixels wide.

Using the inspector to identify the wide table css class

If you are using the inspector:

  • Hovering over a wide table identifies the table class:

    .table-responsive.header.noborders.noshading.tableheading.widetable

  • In this case, the table has the header, no borders, no shading. It also names the style applied to the first row of the table and the line immediately preceding the table, which is the widetable style.

    Widetable