IMGs not setting table column widths

This forum is for all Flare issues related to PDF, eBook, Microsoft Word, Adobe FrameMaker, XPS, and XHTML book targets.
Post Reply
AlanKearns
Sr. Propeller Head
Posts: 103
Joined: Thu Sep 11, 2014 2:06 am

IMGs not setting table column widths

Post by AlanKearns »

I'm having trouble getting images in 2-column tables working in PDF (they work fine in HTML). It seems to be something to do with the width and max-width attributes.

I want them to be shrunk to fit within their cell *if* they are wide.

But if I set 'width: 100%' the big images shrink nicely, but little icons grow huge to fit the cell. And if I set 'max-width: 100%' the little icons fit nicely at their native size, but the big ones display full size, pushing the vertical seperator line (in their body rows, not the header row) rightwards.

It's almost like the max-width setting isn't working on the basis of the cell width.

The table doesn't have any column widths set in the table style, its just 'fit to contents'. I'm hoping not to have to do that, as some tables have narrow first columns, and some need to be 50/50 width, and I can't apply two table stylesheets.

I'm using the selector 'table.StyleOfAffectedTables img' to select the images, and I'm using 'display:block'.

I don't mind mixing table and document stylesheets to get it working, as long as what I do only lives in the Print mediums.

Any suggestions would be welcome!

EDIT: Now that I found this: viewtopic.php?f=10&t=32852&p=141544&hilit=width#p141544

The solution seems to be to get the images in the cell enclosed by <p></p>, but how would I do that for files that go straight from Markdown through Madbuild? I initially thought to use 'Cell content style' in the Table Style editor, but that doesn't seem to work, in so far as after setting it, I can't see any P tags in what I've imported.
IFU
Propeller Head
Posts: 48
Joined: Tue Dec 05, 2017 5:28 pm
Location: Vancouver BC

Re: IMGs not setting table column widths

Post by IFU »

Not sure if this will help in your situation, but in the past, I have had success with the object-fit property to size images inserted in a table

img.shrinkFit /*used to fit image inside container */
{
object-fit: scale-down;
}
Post Reply