scale html table before printing using css

不想你离开。 提交于 2019-12-02 20:30:27

You should use the media types

@media print {
    body {transform: scale(.7);}
    table {page-break-inside: avoid;}
}

So, this styles will by applying only in print preview mode. http://www.w3.org/TR/CSS21/media.html

I ended up rewriting the whole table with percentage sizes applied as classes and then was able to scale the page for printing. Not sure why the browser was ignoring my print styles regarding the transform but converting the table from fixed sizes to proportional sizes has enabled me to scale it with CSS and the issue is gone.

I know I'm raising the dead, but for future search results reference:

I ran into a problem with super wide tables causing all the browsers to calculate the height incorrectly and repeat the thead multiple times on single pages - my solution was to apply zoom: 80% to the body (% varies based on your needs) which forced our page to effectively fit for print and the thead then was repeated properly at the top of every page. Perhaps trying zoom will work where transform did not.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!