Forum How do I...?

overwide tables

csawjer
I try to limit table width with css:: table{display:block;max-width:<size>;}. I do not seem to succeed.
I am glad for any suggestion.
mikeday
Is there unbreakable content in the columns?

By the way, why apply "display: block" to the table?
csawjer
As far as I can see, there is no unbreakable content, just several columns with text.
Problem description:
- Documents with text and (breakable) text in tables.
- The table columns mostly have %-width.
- For some tables it extends into the border of the page or even beyond (and therefore is cut off). To correct I added a css: table{display.block;max-widthj:<size>;} However it does not seem to solve the problem.
- Problem is reproducible
mikeday
How about just this:
table { width: 100% }

Do cells use the colspan attribute?
csawjer
I have tried it with the following css (only relevant attributes shown):
table{display:block;table-layout:fixed;max-width:423px;width:inherit;

Explanation:
display:block--> to be able to set max-width
table-layout:fixed--> to force the table to keep to the set width of columns
width:inherit--> to inherit the size of the parent div

Result:
The table keeps in all situations to the max size given by the page declaration. However some words are to long and they write into the next column.

Further tried: adding word-wrap:break-word. This does not seem to have any effect.

My Querstion:
Is there a way to force the breaking even if it is done not according to the rule? Or, would it be possible to receive from the pdf_creation process information about this rendering problem.

Thanks for your untiring support
mikeday
Recent Prince alpha versions support the word-wrap property.
ckepper
It seems like the problem with overwide tables still persists in Prince 12 - at least to some degree. I have trouble rendering a narrow table with colspan attributes in the first three rows. The fourth row has two columns and the second column (with yellow background) is rendered too wide. Unfortunately, table-layout: fixed is not an option:

markbrown
Is this example also using the max-width property on tables? It seems we don't properly support that in Prince.

Does it work if you place a max-width constraint on the block that contains the table, rather than the table itself?
ckepper
I have placed the table inside a wrapper, added a max-width constraint but this didn't help. The only things that works is removing the wrapping content in the yellow cell.
markbrown
We'll need to look into this.

The following code does produce a table with the expected width, although without the first three rows that you describe. Do they make a difference to the table width for you?
<div style="border: solid blue 1px; max-width: 300px;">
  <table style="font-size: 14pt;">
    <td style="background-color: tan;">
      Coordinates
    </td>
    <td style="background-color: yellow;">
      The line break is correct but the column is still a little too wide.
    </td>
  </table>
</div>
ckepper
The code works totally fine when there is no image in the table but it breaks when an image is added:


Smaller images work fine as well, but the moment an image gets close to the width of the (max-width constrained) container, everything expands. In my case, I want to set the width of the image to 100%.

Attached you will find the source code of the page.
  1. debug.html49.8 kB
    Sample file showing problem
markbrown
Thanks for the code that shows the issue. This is a bug in our auto table sizing algorithm, unfortunately.
markbrown
This bug can occur when colspan cells exceed the total minimum size of the spanned columns. In this case we were distributing too much space to the columns, causing the sudden jump in the table size that you observed.

We have now fixed this bug, and the fix will be available shortly in Prince 12.1. Thanks again :-)
mikeday
Prince 12.1 is available now with the overwide table fix! :D
ckepper
Wonderful - thanks for the prompt fix 👍👍👍