I have a simple table with 2 cols and have encountered a few problems. The left col width is 5% (the text is generally larger that this but I cannot change the size), and the table width is 100%. The table is inside 2 divs but neither divs have any styling.

1 - If the right col doesn't have a width then the width of the first col is just ignored and the cols have a 50/50 width.

2 - If the right col is set to 95% to make up the 100%, it spills over the page margins, (the left col text isnt over 5%).

3 - If the right col is set to 95% and the left col has white-space nowrap and the text in the left is bigger than the width, the text in the left and right cols overlap (not expected behaviour).

4 - If the right col is set to 1% (to get around problem in 3) then the right col sizes fine as long as there is enough text to fill about 3/4 of the col, but if there is less text than that then it shrinks in size (depending on how much text there is, shrinks to about 50%), so either way I can't get what I need.

So to sum up what I need, I need a 2 col table, left col 5% white-space nowrap with text that will be bigger than the 5%, right col the full rest of the width with no overlapping text.

Hope this is clear enough.

Thanks in advance!

I'm not sure if these objectives are compatible:

If the text in the left column has "white-space: nowrap" and the text is wider than the 5% width for that column, then surely it will overlap with the second column, which contradicts your "no overlapping text" requirement.

However, one thing you might like to try is applying "table-layout: fixed" to your table, to specify fixed table layout rather than automatic table layout, since you wish to specify all the column sizes in advance.

I guess. I just expect them to be compatible because they are in the web browser, ie word wrap has a higher priority than width so if the non wrapping text is wider than the width the width increases to accommodate and decreases the width of another column.


Yes I do want to specify all in advance but like I said above I want white space to take priority over width. I basically want the width to act as min width for the left table col so its as small as possible without the text wrapping and the width to act as max width for the right table col so its as big as possible to fill up the rest of the space so the table cells do not overlap.

It seems that the solution is to specify the 5% width on the table column rather than the table cell, like this:

<table>
<col style="width: 5%"/>
<col/>  <!-- second column does not need a specified width -->
<tr>...</tr>
</table>

With this style the column will take up at least 5% of the table width and yet will still expand if necessary to fit the content. However, testing this revealed a bug in Prince whereby the column width will be calculated incorrectly if the text is styled with "white-space: nowrap", leading to text overlap. This appears to be an oversight of some kind, as using "white-space: pre" instead works fine. We will fix this issue in the next maintenance release of Prince.