Printing Tables with Bootstrap W/ Proper Page Breaks - html

I am trying to make a table printable, specifically never have it break a <td> entry in half, while maintaining proper borders. I am trying this:
#media print {
table.print-friendly tr td, table.print-friendly tr th {
page-break-inside: avoid;
}
}
However, this still causes a problem where the table data is missing upper or lower margins. Actually, I am not sure it does anything, because without it, the table misses the last margin on the first page. Easier to explain with an image here:
Plnkr here. Everything relevant is in index.html - I think you need to copy it to notepad and run locally to test printing. Note that the only relevant things in that code are the <style> definitions and the table classes.
To summarize - my goal is to make the table break properly AND maintain margins on print.

Related

break-inside: avoid doesn't work for basic example

I'm using Chrome v99 and a pretty basic usage of break-inside: avoid - but it does nothing.
Moderator: This is not a duplicate of this post and the 1 answer there isn't helpful.
My objective is to disallow the contents of all these divs from splitting at page breaks:
<div class="opt">
Here is my inline css:
<style media="screen" type="text/css">
#media print {
div.opt, table {
break-inside: avoid !important;
}
}
</style>
The full html is a bit lengthy but you can view the entirety here.
Simply press CTRL+P and observe that it page-breaks in the middle of divs with a class of opt - but it shouldn't because I'm using break-inside: avoid.
The example I linked to is very short and contrived, but my real scenario has many more sections and is dynamic, pulling from a database. So there's no way to know where the page is going to break relative to the divs. I just want the contents within those divs with that class to always stay together on the same page and never split across a page break. No div contents ever exceed a page, they are even shorter than my example.
Help, what am I doing wrong?
You have media=screen in the style tag...
Your print styles will only load when you're using a screen and not a printer
<style media="print" type="text/css">
div.opt, table {
break-inside: avoid !important;
}
</style>
When you fix it though it still seems to wrap onto multiple pages uglier but at least now you can play around with what print styles work

print preview table bad stacking?

I have table with many row. It's too long for the snippet so i provide the jsfiddle . Basically is html table with many row and structured with
<table>
<thead>text here!</thead>
<tbody>
inside this is td with many tr structure, rowspan and colspan
</tbody>
All i want is :
Thead always appear on the top of the print paper
i want automatically page break of the first tr (MODEL as the starter td)
I already has the solution for the first problem, but why it's look so ugly (some td has stacking problem on the next paper) and get inside the thead? i confused with this...
And if possible, is there any solution for page-break? i already searching all the answer but it must done manually to the which tr should on another page. But i want to automatically doing page break on start tr of MODEL
Thank you, i know my question is basic... but i really stuck here.
You can try scaling out your page using the #page property of CSS3
Your code would somewhat look like this
#media print {
#page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
}
tr,td { page-break-before: always; }
}
Hope it helps!

Making table cells a block element

I'm currently tasked with making a mobile style sheet for my works website and I've hit a wall with some of the final stages.
My main constraint is that I can't edit the source HTML and have to work with the source provided.
I want to make a table that contains buttons respond when it hits 450px wide by dropping the buttons (table cells) to it's own row. I can do this simply via divs but not tables. I've created a simple example of what I want to do http://test.aboutcher.co.uk/so/tables.html but I have no idea how this effect can be achieved in the table.
I know tables are a bad idea for layouts but I cannot change this in the source so have to fight my way with it.
Edit
I've found my issue, there's a non cell that isn't getting the display:block style applied in the source causing the other two that are receiving the style to ignore the display:block.
Though this is not an Ideal way. but as I see it, I think you can create another table row, and hide it initially by giving a display none; and then use CSS media query, where you set the specify the width: XXpx; and set the top 2nd coloumn to display: none; and bottom table colomn to display : block;
Hope that makes sense
#media (max-device-width = 400px) {
.second-column{display:block;}
.first-column{display:none;}
}
You just need to define that your td is display:block and manipulate them as your div. Have a look at this demo: http://jsfiddle.net/68EQK/

Can not get rid of HTML table border - with screenshot and jfFiddle

Not a Drupal question, but probably a CSS/HTML question:
I have written a module for Drupal 7 with Bartik theme, which displays a button "Show". When clicked it will fetch JSON data from a PHP script and generate a HTML table as string and finally display that table inside (or instead?) of a <div id="top"></div>
This whole complex stuff (at least for me) works surprisingly fine:
However I have this minor cosmetic problem: I can not get rid of the fine white line between the tabel cells.
I've added <table border="0" cellspacing="0" inline - this doesn't help.
I've added an id to the table <table id="last" and CSS-code:
#last {
border:0;
cell-spacing:0;
}
but this doesn't work either.
When I inspect in Mozilla Firebug or Chrome dev. console - those attributes are there.
Also, I have a non-Drupal page too - it doesn't show those ugly lines.
Any ideas please?
I've read, there are CSS stylesheets, which supposedly reset everything, but they are probably overkill for my problem.
My jsFiddle code works too, but doesn't have the ugly white lines...
I'm not posting the URLs of the above mentioned pages, because they both are in Russian and require registration.
There does not seem to be any code or URL that actually demonstrates the problem, but you could use the brute-force method of adding the following into the stylesheet:
td { border: none !important; }
It sounds like the problem is caused by some CSS code setting a border on the cells, overriding whatever you might set at the table level.
If this does not help, we at least know that the problem is caused by something else than the table and cell elements (perhaps some elements inside the cells?).
It it does help, inspect the td cells to see what is now causing the borders, and write a stylesheet that is sufficient to override that (or edit the settings that cause the borders).
Try giving this:
table {border-collapse: separate;}

Printer Friendly Pages With a Header on Every Page?

I'm working in a J2EE environment with a web app that displays large amounts of tabular data. We want to be able to print these tables with each page displaying the header and footer. I understand some browsers support this through the thead,tbody,tfooter tags, but the users are using IE6 only. A row is normally only one line but on occasion can be two or three (maybe more).
What are my options here? Is there a quick and easy way that I'm not aware of? Do I need to some how "calculate" the height of a set of rows? Or am I stuck doing something static that will hopefully work "most of the time?"
Thanks for any help.
You're doing the right thing in THEAD and TBODY tags, but try adding the following CSS definitions too:
thead {
display: table-header-group;
}
tbody {
display: table-row-group;
}