I have been using jquery.printElement.js to print a custom calendar table that I created. The functionality inside a div is mostly working as expected, but I am facing some challenges with the CSS. Despite passing along all necessary .css files, my cells are expanding to fit the content, as discussed in my previous inquiry.
In an attempt to resolve this issue, I have incorporated properties such as table-layout: fixed;, white-space: nowrap;, and overflow:hidden; in various places. I even tried including them as additional parameters within the printBodyOptions:
function printCalendar(){
$('#printable').printElement({
overrideElementCSS:['../css/calendarstyle.css',
'../css/colorbox.css',
'../css/buttonstyle.css'
],
printBodyOptions:{
styleToAdd:
'table-layout:fixed;
overflow:hidden;
white-space: nowrap; !important;'
}
});
}
Despite exhausting these options, I still find myself unable to achieve the desired outcome. At this point, I am considering alternative methods such as printing the calendar as an image through screenshotting or a similar approach. This way, I hope to preserve the visual proportions of the calendar on both screen display and printed version. If anyone has insight into how this can be achieved or knows of better solutions, I would greatly appreciate any guidance.