I am using the following css to show a large amount of table data while printing.
#toolbar.fixed + .content{
overflow: visible;
position: static;
bottom: 0em;
}
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
The browser I am using is IE 7. The problem I am facing is that the data on the last row of some of the pages is getting split between the current page and the next page. I am trying to figure out if something is wrong with my css above or if I need to introduce additional css to prevent the last row of data (only on some pages) to stop getting split between two pages.
page-break-inside is still unsupported in many major browsers:
http://www.w3schools.com/cssref/pr_print_pagebi.asp
Also note that page breaks are not permitted inside positioned objects.
Using page-break-before: auto; And page-break-after: auto; may fix this, but you can use this page as a guide to create styles you need without using page-break-inside ...
Use below code.....
`function printControl(){
var table = document.getElementById("DataList1");
var count = table.rows.length;
for (var i = 0; i < count; i++) {
if ((i % 4 == 0)&&(i!=0)) {
table.rows[i].style.cssText = "page-break-after:always";
}
}
}`
Related
can I get column sum in CSS only? im using weasyprint which does not support js/Jq so I have to calculate the sum anyhow and i don't know how will I do it.
table {
border-collapse: collapse;
counter-reset: sum;
}
td[data-value] { counter-increment: sum attr(data-value) }
thead tr::after { content: counter(sum) }
but it always show zero
I know you can put link URLs directly after the link itself, but is there a way to do that at the bottom of the page instead?
If I have a page that looks like this:
<p>Check here and here for more information.</p>
I can use the CSS trick above to make the print version look like this:
Check here (http://example.com) and here (http://example.net) for more information.
Is there a way to make it look like this instead?
Check here[1] and here[2] for more information.
[1] http://example.com
[2] http://example.net
If you know the number of links you could achieve what you want. Let's assume there are three links in your section.
section {
counter-reset: links;
position: relative;
padding-bottom: 4em;
}
section a {
counter-increment: links;
}
section a::after {
content: "["counter(links)"]";
}
section a::before {
content: " ["counter(links)"] "attr(href);
position: absolute;
left: 0;
}
section a:nth-of-type(1)::before {
bottom: 2em;
}
section a:nth-of-type(2)::before {
bottom: 1em;
}
section a:nth-of-type(3)::before {
bottom: 0em;
}
<section>
Here's your text containing three links.
</section>
Note: In long texts on multiple pages you may get unexpected results. But you could devide your text in multiple sections. And of course your css code increases with every new link...
I personally would do it this way.
First create a hidden ul element at the bottom with an id.
<ul id="footnotes"></ul>
CSS
#footnotes {
list-style: none;
position: fixed;
bottom: 0;
display: none;
}
Then give all a elements on the page an index manually.
My link
My link
My link
Then show the footnotes element in print mode and attach its index behind.
#media print {
a:after {
content: "["attr(data-index)"]";
}
#footnotes {
display: block;
}
}
Now iterate in JavaScript through all a elements on the page and show the link for each index.
const footNotes = document.getElementById('footnotes');
const links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
var li = document.createElement('li');
li.innerHTML = '[' + links[i].getAttribute('data-index') + '] ' + links[i].getAttribute('href');
footNotes.appendChild(li);
}
My site contain a lot of data like 150 records on page, when I press ctrl+p then it will show the first page only, like only the visible part of the page but I want full [ 150] records.
This is what I tried So far:
<style>
##media print
{
html, body {
height:100%;
margin: 0 !important;
padding: 0 !important;
overflow: auto;
}
#header, #menuheader
{
display: none !important;
}
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
#prctrow
{
text-align:center !important;
}
}
</style>
This css remove the scrollbar from print preview but data is still not showing.
A few steps to possibly fix this as it's a bit difficult to see the complete issue with only your CSS.
Make sure your actual CSS is using one "#" symbol for "#media print {"
"display: inline-block" might need to be set to "display: block;"
Anything floated may have to be cleared and set to not float
Things positioned absolute or fixed should be set to static
Add something at the bottom of the page to test if everything is blank or just the table on the second page
I have a tree-like HTML structure consisting of ~1k elements.
Page scrolling is accompanied by a low FPS.
Performance test shows frequent Update Layer Tree, which is takes 60% of the time.
I suspect that the reason lies in the CSS: disabled javascript doesn't change anything, but removal of all styles fixes the problem.
So, which CSS-properties or selectors can cause it?
I don't know if any particular CSS rule can cause such behavior. I would have to see the page to inspect it. Nevertheless, a proven technique for making large lists scroll more smoothly is to add transform: translate3d(...) to the list (at least for my company it proved its value). The below snippet gives an example. Maybe this can solve your problem to a degree.
function createList (id) {
const container = document.getElementById(id);
for (let i = 0; i < 1e5; i++) {
const div = document.createElement('div');
div.textContent = i;
container.appendChild(div);
}
}
createList('container-1');
createList('container-2');
body {
display: flex;
flex-flow: row no-wrap;
}
section {
height: 500px;
width: 500px;
overflow-y: scroll;
}
#container-1 {
background: red;
}
#container-2 {
background: green;
transform: translate3d(0,0,0);
}
<section id="container-1"></section>
<section id="container-2"></section>
I am using simple CSS with modern browsers: IE 9 and Firefox 10.
<link href="/css/print.css" media="print" rel="stylesheet" type="text/css" />
With this content it works.
#media print
{
#wrap, div.push, div.footer, div.barra_sopra_datatables, div.fg-toolbar, img{
display: none;
}
body {
font-size: 10pt;
}
* {
margin: 0;
padding: 0;
}
}
I need to hide some columns of a table, so just for testing I tried
tr:first-child {
display: none;
}
but it hides all the tr elements.
I’ve alsove also tried td:first-child and table tbody tr td:first-child and other selectors, and all of them fail. I need to maintain compatibility with IE 8. kimblim.dk says that IE 8 supports these selectors, so why won’t it work? I’m not trying to set background color which many pointed out doesn’t work.
I think you cannot just don't display table cells.
display:none means, don't display it at all, so do as it would not have been there in the first place. Perhaps the browser thinks, if the first column is not there anymore, the next column is the new first one and then it hide this columns as well.
Try to give a table-cell a class hide-in-print and then
#media print {
.hide-in-print {
display: none;
}
}
Maybe #media print is not supported fully by IE. If this is true, try conditional comments.