printing-web-page

I have a table as the entire content of an HTML document (for legitimate table purposes...it is table data, not for layout). Some cells have widths and heights specified (not through css but using the old sizing inline in a table structure), but the overall table does not have a width or height specified. This is a fairly large table, but with proper scaling (about 70%) it can be printed to fit nicely on a single sheet of paper. This can be accomplished by using the scale page function within the printer settings of IE, Firefox, and Chrome. Is there a way to scale the whole page (which in my

If I have a print CSS styling an element with: border:1px solid black; or: border:0.25pt solid black; The line is very thick when it prints – at least 1pt. If I try a much smaller value, such as 0.05pt, the line doesn't appear at all. How can I get a thin line? In programs like InDesign you set the thickness to 0.25pt for a 'hairline', i.e. a very thin line but not so thin that it won't be printable. Note: this question seems to ask the same thing, but nobody has addressed the actual issue of the line thickness, merely the best units of measure to use: pt or px for specifying border-width for

should i use pt or px when specifying border-width in css for media print? i basically just want hairlines For print you should use pt, as it's an absolute unit not based on the resolution of the media. for hairlines use just px In general you should use points or em's in place of pixels when possible. The reason is that points and ems both scale with the users' resolution or zoom setting where pixels do not. On many larger, high definition or wide screen monitors individual pixels are too small to be reliably useful for placement. 来源： https://stackoverflow.com/questions/3186925/pt-or-px-for

I'm making some printable calendar website using HTML, CSS and JS. Unfortunately I cannot use CSS property called text-shadow , because shadow behind text prints as solid black text without any blur or transparency. Same problem occurs when I'm trying to use box-shadow for any div - shadow prints like solid black color with no transparency. I'm using Chrome with style html {-webkit-print-color-adjust: exact;} to ensure all background colors will be printed. Any workaround? I would prefer not to use any background image. Edit: I don't want to hide shadows, it's very easy of course. I want to

I have a page that spits out db data in long horizontal tables. I need to print it nicely so it does not cut off. Any tips ? If it doesn't fit on the paper in a readable font, it just doesn't.. In my opinion, huge horizontal tables (be it a HTML table or an Excel sheet with many columns) don't lend well to printing. For that matter, they don't lend well to viewing on a screen either. Remember vertical scrolling is much easier for your users than horizontal scrolling - all thanks to that little wheel on your mouse. Worst case, you might need to write a seperate print version which uses a

When we print pages from our web site, which is based on Bootstrap 3, they are printing on some browsers showing the mobile version. I have Googled to try and find a good solution, but not really found anything that works. Using the same CSS for the screen and adding the "print-hidden" class to specific DIV's our pages look fine using Safari on a Mac, but using Chrome on the Mac or Firexof and Chrome on the PC the print preview shows the mobile version. Is there an easy way to tell the browser that the viewport width is a regular screen not a phone (XS), or do we have to incorporate a lot of

I've been printing my page using the code below: window.print(); An image below is what the print preview in Google chrome browser looks like. It has two main buttons: print and cancel . I want to know if the user has clicked the print or cancel buttons. What I did uses jquery: HTML Code of the Print Preview: <button class="print default" i18n-content="printButton">Print</button> <button class="cancel" i18n-content="cancel">Cancel</button> Jquery Code: $('button > .cancel').click(function (e) { alert('Cancel'); }); $('button > .print').click(function (e) { alert('Print'); }); I tried the code