Important Note: The HTML to PDF rendering engine I am using disables JavaScript by default, so I am seeking solutions that utilize CSS only.
Within my report, there is a table utilized for accounting purposes featuring 11 columns:
- The first column serves as a counter (e.g. 1., 2., up to n.) and may span up to 3 digits.
- The second column houses a 12-digit reference number.
- The third column displays the address corresponding to the reference number in the previous column; this field can be empty or contain at least 50 characters.
- The remaining columns contain data related to amount, currency, or price, with values ranging from 0.00 to a maximum of 8 digits separated by commas.
Assuming the width of the table needs to be set to 1024px (subject to the requirements of the PDF rendering engine), my objective is to:
- Dynamically adjust the widths of the first, second, and fourth to eleventh columns based on their content, resulting in varying column widths depending on the longest content present during generation.
- For the third column, it should adapt to the remaining space within the original 1024px width, adding an ellipsis to indicate overflow if necessary (crucial).
I initially attempted to allocate fixed widths to each column totaling 1024px, successfully implementing ellipsis overflow through CSS. However, undesired white spaces were observed, prompting the need for optimization:
- Specifically, I set static widths of 75px / 100px / 125px for the fourth to eleventh columns, irrespective of whether the content was 0.00 or not. Notably, certain columns such as the fifth, eighth, ninth, and tenth could potentially have their widths reduced by half. https://i.stack.imgur.com/wSsBK.png