I have a long table that starts on one page and finishes on another page. The issue is that tr row between these pages does not break, but it stretches. I want the following behavior: If tr can`t fit, the complete row (ALL TR, not a part) should go to the other page
I have tried these but not work for me
/*.tableAdditionalInfo >table{
!*-fs-table-paginate: paginate;
border-collapse: separate;*!
!*page-break-inside: avoid;*!
-fs-table-paginate: paginate;
border-spacing: 0;
}*/
.tableAdditionalInfo > tr {
/* page-break-before: always; */
page-break-after: always
}
You should use:
tr {page-break-inside: avoid}
Related
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'm having a trouble fixing the table on this link . It has two rows, but when I turn it to mobile/tablet views, the second row overlaps over the first row.
It looks like this on the attachment:
Please help. I'm not really good in CSS.
This is because of these lines:
#media screen and (max-width: 994px)
table.colors_pricebox tbody tr:last-child td:nth-child(2) table:first-child tbody tr:first-child
{
position: absolute !important;
}
Absolute positionings do overlap each other if they have the same margins.
If you remove the attribute or replace it by position: relative the <tr> - tags don't overlap anymore, but you have to find a way to display your <tr> - tags containing the price tag and such.
Here is the fix i recommend for quick turn around for the moment. Add this css in your media queries
#media screen and (max-width: 994px) {
td.productDetailDiscountWrapper table tr td {
padding-top: 50px !important;
}
.product_productprice {
margin-top: 40px !important;
}
}
I'm attempting to apply media queries to a table to hide optional columns on smaller devices.
I have two columns to hide based on two screen breaks:
#media screen and (max-width: 33em) {
th.optional-1,
td.optional-1 {
display: none !important;
}
}
#media screen and (max-width: 43em) {
th.optional-2,
td.optional-2 {
display: none !important;
}
}
Then I apply class="optional-1" to both the th and td elements. I add data-role="table" to get the table to style correctly.
The media query works fine, however once the table gets to the default responsive size the table drops to a flattened view. I first thought about adding a class to force the table to be unresponsive (which works) but it then stops my optional classes working as both are competing with !important which is required to get over the default responsive style in JQM.
.table-responsive-none td,
.table-responsive-none th,
.table-responsive-none tbody th,
.table-responsive-none tbody td,
.table-responsive-none thead td,
.table-responsive-none thead th {
display: table-cell !important;
margin: 0 !important;
}
.table-responsive-none td .ui-table-cell-label,
.table-responsive-none th .ui-table-cell-label {
display: none !important;
}
Alternatively I could use data-mode="columntoggle" but I don't want the behaviour of the column toggling facility and I want to also specify my own breaks.
The problem is fixed when removing data-role="table" but then the table doesn't look right.
Bugger if only I thought of this sooner.
I solved the problem by removing data-role="table" and adding the class ui-table to the table which now turns off responsive behaviour and lets me control it. In the end I only need the media queries to hide the columns at the given breaks.
#media screen and (max-width: 33em) {
th.optional-1,
td.optional-1 {
display: none !important;
}
}
#media screen and (max-width: 43em) {
th.optional-2,
td.optional-2 {
display: none !important;
}
}
I am looking to indent content of table columns BUT NOT the content of the table heading row. I had found some code on another thread that solved the issue of needing to pad only certain columns, but this also pads the table heading row.
/* first column */
td:first-child {
padding-left: 20px;
}
/* second column */
td:first-child + td {
padding-left: 10px;
}
/* third columns */ {
td:first-child + td + td {
padding-left: 0;
}
Use a TH tag instead of a TD tag for your header row in your HTML.
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";
}
}
}`