print preview table bad stacking? - html

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!

Related

Printing Tables with Bootstrap W/ Proper Page Breaks

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.

how to segregate this css into appropriate and unique class so that they do not interfere with other page layouts

I am working on a page where I have to show a scrollable table. Please find it in the below jssfiddle link :
jsfiddle
Problem is the actual page where I am including the above html table and the associated css, that page itself has other layout on it and a different css file for that.
I guess my above css file table , td and body is interfering with the other css used in that page and
destroying the display, Can anybody please help me to change the css in the jssfiddle link above
so that everything is put into unique class/id and used appropriately in the html. So that no matter how are the remaining page layout , other widgets and layout do not overlap with my table.
My table should remain intact in terms of its look and feel and scroll property.
Apologies, I am not an expert of HTML/CSS
Even if someone can explain me what is the purpose of the first 4 lines
* { } and then
body { },
table { } ,
td { } , will be great help. I think those should put under appropriate class and then used in the html. Please provide some guidelines how can I do that.
Thanks
*{}
Applies to every element on the page. You still want what is there, but you want it to only apply to every element within your scrolling tables, so I changed it to :
#scrollTableContainer *{}
I move'd your body's font declaration into div#scrollTableContainer
And then I prefixed your table{}, td{}, td:first-child{}, td:first-child + td + td, td:first-child + td + td + td and td:first-child + td + td + td + td with the #scrollTableContainer ID.
The one thing I didn't decide for you was what to do with your font-size in html{}. I am guessing you will still want that. My suggestion would be to decide on a font size and merge it with the declairation in div#scrollTableContainer
And here is the result : http://jsfiddle.net/trex005/6q1avq7f/1/

Tables: How to achieve “normal” td widths, but 100% table width?

On our site we have tables containing data. We like the column widths we get with a normal table, but we like the border-bottom of tds to stretch the entire width of the page like we get with CSS: table { width:100% }, as can be seen on a demo table widths page, which renders like this:
Is it possible to achieve the same column widths as with a normal (non-width-100%) table in a table where the border-bottom stretches the entire width?
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
We need a solution that works in at least IE6-8 + FF.
Btw, is there a better way (tm) of showing HTML snippets than linking to an external page? I can show just source, but having HTML rendered too is very illustrative.
This was originally posted on Webmasters, but following a suggestion there, I now (re)post it here.
I finally figured it out.
My first few attempts dealt with floating <td>s and <tr>s, but apparently I was on the right track but had the wrong element.
I think what you want to do is to float the <tbody>. The <table> will still be 100% width, so it will stretch the whole width of the page, but the <tbody> inside of it will act as a container for everything else, and floating it will release it from the shackles of the size of its <table> container width.
The downside of this is that you won't be able to use <thead> or <tfoot> elements, because you will no longer have any way to align them with the <tbody> content.
Try this out:
table {
width: 100%;
border: 1px #000 solid;
}
tbody {
float: left;
}
td {
border: 1px #000 solid;
}
You can use the new CSS properties min-width and max-width to bound the columns sizes without setting them explicitly.
To get a proportional version of what would be rendered when the table's width is not specified, I think you'd have to let it render normally (remove your table width setting) and then use javascript to read the column widths and resize.
Pulled this example of using jQuery to syncronize the column widths of two tables from another question:
$("#t1").width($("#t2").width());
$("#t1 tr td").each(function (i){
$(this).width($($("#t2 tr:first td")[i]).width());
})
Should be a pretty good starting point for scaling your column widths.
This is pretty ugly and not exactly what you asked for, but it works in Firefox and appears to get the same gist...
<html>
<head>
<style type="text/css">
td{background-color:blue;}
div{border:1px solid red;position:absolute;width:100%;}
</style>
</head>
<body>
<table>
<tr>
<td>asdf<div></div></td><td>hello blah blah</td>
</tr>
<tr>
<td>lorem ipsum dolor si amet</td><td>testing</td>
</tr>
</body>
</html>
I was looking for a similar answer to this question, however I don't understand what you mean by
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
But anyway, I found a solution to my problem. Not sure if it can be used here, but it solved my problem. Maybe it can be helpful to others.
I didn't add in another td. I just applied 100% to every last td with content.
So I could add a class to every last td to do that, or I could use the last-child selector to do it for me.
Something like:
table
{
width:auto;
}
table tr td:last-child
{
width:100%;
}

Firefox table css generate tbody killing table width

I am working on taking an IE only site and making it cross browser. Everything is looking good in IE, Chrome, and Safari. However Firefox isn't happy.
I have a table class called "datatable" it is as the name suggests a datatable. I am trying to get it to stretch to 100% of width of the div it's contained in. The div above is 100%. When I use firebug to check it, the table is stretching to 100%. However, the tbody that Firefox generated is not stretching to 100%. So because of that the rows in the table are as small as the tbody. So I have no idea how to fix this. I tried
tbody{width:100%;} and it did nothing.
Any ideas I would greatly appreciate it.
Okay I just answered my question... inside the css there was a generic css like this...
table
{
border:0px solid #000000;
padding:0 0 0 0;
border-collapse:collapse;
border-spacing:0;
display:block;
}
I removed the display:block and everything works great now... I had looked for that on the table.datatable definition, but did think to look for a generic one in the file...
This might be silly, but make sure you're selecting the tbody correctly
#datatable tbody{width:100%}
I had the same issue,
solved it eventually by setting the width property of the header cells (i figured that's what firefox looks at to decide the tbody width).
table.table_class th { width: 115px; }
it's an option if, like me, you don't want to mess with generic css.
Check to see if you have font-size set to something lesser than 100%.
If some browsers need display:block in <table> so ...
table {
// Something..
display: block;
}
body:not(:-moz-handler-blocked) table {
display: table;
}
Example case : HTML in e-mails
Just a bit hack if you still need to preview on Firefox

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;
}