filamentgroup / tablesaw

A group of plugins for responsive tables.
MIT License
5.48k stars 434 forks source link

Media query breaking format for print #376

Closed vigfuz closed 1 year ago

vigfuz commented 5 years ago

When printing pages in portrait mode I kept getting the formatting as mobile view, stacked. I found it to be an effect of breakpoints in the tablesaw.css.

On line 417 there is a breakpoint stating:

@media (max-width: 39.9375em) { / Table rows have a gray bottom stroke by default / and on line 464:

/ Media query to show as a standard table at 560px (35em x 16px) or wider /

@media (min-width: 40em) { .tablesaw-stack tr { display: table-row; } As you can see, in the comment it is stated that the breakpoint is set to 560px or 35em but the media query is set to 40em (640px). When changing the em values I have to go as far down as 33em and 32.9375em to get the same formatting as on screen and not to have the mobile formatting kicking in.

So the breakpoint kicks in to late than the comment states and when testing it on my end the breakpoint should be even less than 35em to work properly.

I have also tried to override the breakpoints but some how the breakpoints stated in the tablewas.css don't get overridden properly and effect the outcome. I tested to remove all the information in the tablesaw.css, then my own overrides did the job. And not wanting to edit the original tablesaw.css inside the module it would be nice if you could see if this could be resolved on your end. Maybe style for print as well?

I have also this issue posted on drupal.org for the Responsive Tables Filter module: https://www.drupal.org/project/responsive_tables_filter/issues/3059333

Cheers, Vigfus

mrentropy commented 3 years ago

Just in case this helps anyone, Vigfus is exactly right about updating @media only all to @media only screen. Using that tip I was able to make my tables print correctly by updating the media query to contain the entirely of the other CSS, and not just the first section (i.e. Wrap all the CSS in @media only screen {}. None of it is needed for print.). Many thanks to Filament Group for creating this very handy tool!