Preventing Tables From Printing Across Pages
Don't ask me why but some people actual print things (I know who the hell are these people). One of my clients came to me because one of their users was printing a report and the tables looked like this:
They wanted to know if there was anything I could do to keep it from printing like this. My first comment was not to print it but they didn't think that was funny. In order to fix this I added the following to the CSS (actually the SCSS) for their site:
@media only print {
table{
page-break-inside: avoid;
}
}
This tells the browser to avoid having page breaks inside a table when printing the results look like this:
It still has problems when the table is larger than a piece of paper but there's really only so much you can do when it comes to printing.
Scott Keck-Warren
Scott is the Director of Technology at WeCare Connect where he strives to provide solutions for his customers needs. He's the father of two and can be found most weekends working on projects around the house with his loving partner.
Top Posts
- Working With Soft Deletes in Laravel (By Example)
- Fixing CMake was unable to find a build program corresponding to "Unix Makefiles"
- Upgrading to Laravel 8.x
- Get The Count of the Number of Users in an AD Group
- Multiple Vagrant VMs in One Vagrantfile
- Fixing the "this is larger than GitHub's recommended maximum file size of 50.00 MB" error
- Changing the Directory Vagrant Stores the VMs In
- Accepting Android SDK Licenses From The OSX Command Line
- Fixing the 'Target class [config] does not exist' Error
- Using Rectangle to Manage MacOS Windows