Table style with print / non-print variations

[BedfordWriter]

This is taking way too long to figure out...

I'd like to define a table style so that it has a width of 70% in HTML5 (to make room for the side menu), but 100% in PDF. Should be easy enough: Add @media-print and @media-nonprint sections to the top of the CSS file and define the appropriate properties. The trouble is that those sections seem to be ignored. Is this impossible to do with table styles, or should I use a section name other than @media-print, etc.?

It seems to work if I define the widths in a sub-class of Table, within the main style sheet, but I also want banded rows and such, so I think that I need to use a style rather than a class.

[Paulie]

Hi there,

In my style sheet (where the media was initially created in Flare), the media syntax is @media print rather than @media-print as in your example. The former will show in the Flare UI and can be assigned to a target. The latter is not visible in the Flare UI and cannot be assigned. I would remove the hyphen and see if that helps.

Also, if the above doesn't work, take a look in your target properties (Target > Advanced > Stylesheet Medium) and make sure that each target is using the medium that you created. For default (print and non-print) mediums this shouldn't be necessary, but is worth a try if it still isn't working.

[BedfordWriter]

Thanks for the suggestion. Not quite there though. A sample from my table.css file follows. Realizing that this table only ever has two columns, I was able to define output-specific specifiers for column 2 within the Flare interface, but couldn't see anywhere to put a specifier for the overall table width. I had been editing the file to put a width: specifier in the mcTableStyle portion, but now that I look at it, maybe I should have been using a size: specifier, or putting the width: into the mcTableBodyStyle section instead (?)
I'm going to look pretty silly if one of those turns out to be the answer, but am posting this anyway for the edification of those who come after.

Code: Select all

@media print
{
	mcTableStyle
	{		}
	mcTableColumnStyle
	{		}
	mcTableColumnStyle
	{	size: 450px;	}
	mcTableBodyStyle
	{		}
}

@media non-print
{
	mcTableStyle
	{		}
	mcTableColumnStyle
	{		}
	mcTableColumnStyle
	{	size: 60%;	}
	mcTableBodyStyle
	{		}
}

[Paulie]

Starting with the simplest solution. If you want this to apply to all tables (regardless of the table style used), you could add something similar to the below to your main style sheet (instead of your table style sheet):

Code: Select all

@media print
{
table
	{
		width: 100%;
	}
	
}
@media non-print
{
table
	{
		width: 70%;
	}
	
}

I'll give another example soon for a table style sheet specific example (I will have a quick play to make sure what I am about to send you actually works as I think it does).

[Paulie]

Okay,

Here is what I had to add to my table style sheet to replicate what you are trying to achieve:

Code: Select all

@media print
{
	table.TableStyle-TwoTone
	{
		width: 100%;
	}
}

@media non-print
{
	table.TableStyle-TwoTone
	{
		width: 100%;
	}
}

Note: TwoTone is the name of my table style sheet. You would have to replace that with the name of your table style sheet (or better yet, view the source of an HTML5 output and see what class your table is using. In my case it looks like this:
<table style="mc-table-style: url('../Resources/TableStyles/TwoTone.css');" class="TableStyle-TwoTone" cellspacing="0">