Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] cellPadding not respected for unstyled table #1020

Open
vasilvalkov opened this issue Jan 5, 2024 · 5 comments
Open

[Bug] cellPadding not respected for unstyled table #1020

vasilvalkov opened this issue Jan 5, 2024 · 5 comments

Comments

@vasilvalkov
Copy link

vasilvalkov commented Jan 5, 2024

When I create a PDF using the html property and the theme styles turned off, cellPadding values are ignored when calculating column widths. The result is cells contents touches together like this:
image

Here is a minimal reproduction in CodePen. I've commented out all the styles and in the HTML rendered table there is a small gut between columns (probably added by the browser), but when I export this to PDF this gut is gone and table looks like in the above picture.

In the reproduction I've set cellPadding: { left: 1, right: 1 } in all styles, bodyStyles, and headStyles, and also in the willDrawCell hook - all with no effect.

Here are the versions I use
in my real project
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.7.1",

in the CodePen
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.8.1",

@mmghv
Copy link
Collaborator

mmghv commented Jan 6, 2024

The styles options are not respected because useCss is set to true thus the CSS styles are used rather than the provided style options.

Although you commented out the CSS styles, the table still has CSS styles, even if you set padding: unset CSS rule, it will get parsed to 0px padding so cellPadding won't be respected.

When using cssStyle: true you should use CSS rules to style your table, if you want padding add padding in the CSS.

@vasilvalkov
Copy link
Author

Well, it is not the style options that are not respected. Only cellPadding is not respected. If I add this style fillColor: [100, 0, 100] to bodyStyles, it will be respected and applied, but cellPadding will not.

@mmghv
Copy link
Collaborator

mmghv commented Jan 8, 2024

You will find that some styles may apply like fillColor because the background color is none, but most won't because CSS styles will override it, so this isn't a bug really.

If you want to style the table yourself with style options, set useCss to false, and theme to 'plain' and add the styles you want.

  useCss: false,
  theme: 'plain',

@vasilvalkov
Copy link
Author

I want both of them - CSS and style options - and assumed that style options override CSS, but it appears to be the opposite. I create the PDF from dynamic tables that bring their own styles I want to keep, like fonts, colors, etc. But I also want to have equal styles for all tables like the cell padding.
The only escape hatch I found so far that worked for me is borrowed from this SO answer where they used the didParseCell hook to override any styles using style options.

@simonbengtsson
Copy link
Owner

I think it also make sense that options override html parsing. But as mentioned above right now the plugin might override some values either incorrectly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants