Skip to main content
joannek14292687
Participant
April 8, 2015
Question

Tables change width when printed using print button added to skin

  • April 8, 2015
  • 1 reply
  • 3263 views

I am using Robohelp HTML version 11 and publishing with WebHelp. Many of my topics have tables in them which display as expected in Preview mode and when published, but when these topics are printed, I am having an issue.  The issue is that any table that extends across a printed page changes width.  For example, if a printed topic is two pages long and a table extends from the first page to the second page, the table will actually be less wide on the second page than it was on the first page. This occurs when using the Print button that I added to the Navigation Bar of the WebHelp skin we are using.

This topic has been closed for replies.

1 reply

Willam van Weelden
Inspiring
April 9, 2015

You can assign a print style sheet or add a @media print {} to your CSS. In there you can specify styling specifically for printing.

cc1864nv
Participating Frequently
April 15, 2015

Could you give more detail on how to do this? I am having a similar problem with printing tables using a print button on the toolbar area of the skin.  When printed, the tables run off the page or get cut off. How would I set it up so that they fit on the page? I'm pretty new to CSS/RoboHelp so any step by step instructions would be useful. Thank you!

Willam van Weelden
Inspiring
April 16, 2015

If your tables run of the page, it may be that the table contains too much columns or that the contents of the table is simply too much. In both cases, the table will use the minimum width it can, but may still be too large. This may happen if you have large images in tables or if you have over 6 columns.

To style your table for printing:

  1. Open the style sheet through the Project Manager.
  2. Select Print as the Media of the CSS:

  1. Update the CSS as you would regularly do.

If you want to set the width of tables through the CSS, open the style sheet in Notepad or another text editor and find the table style. Add the following to the table.myName (replace myName by the name of your style):

width: 100% !important;

You table will now always be 100% the width of the page.