CODEWITHSUNDEEP
jquerycssprintingdatatablecss-tables
aziz
aziz

Reputation: 336

Datatables print issue - weired line before page break

I am trying to print a table with modified design, where every table row is wrapped in a bootstrap "col-xs-3" class and each 4 "col-xs-3" is wrapped in "row" class like below,

The problem is when I tried to print this page it left wired small line in each page shown in image. My CSS to break page is below - 

.row { 
  page-break-inside:avoid; 
  page-break-after:auto; 
}

enter image description here

Sample fiddle is linked below, How do I resolve this? Thanks in advance.

https://jsfiddle.net/Lr77dgmt/1384/

Upvotes: 2

Views: 954

Answers (1)

NullReferenceException
NullReferenceException

Reputation: 81

You were on the right path. You just needed to add a page break for every 3rd row. Given that from the second page onward 4 rows can be fitted instead of 3, you can do something like the below. We first define a rule for the 3rd row only, and from then on we can define a rule that applies to every 4th row + 3, to skip the first 3 rows.

.row:nth-child(3) {
  page-break-after: always;
}

.row:nth-child(4n + 3) {
  page-break-after: always;
}

I have updated the fiddle with this and added a few more rows just to simulate a few more pages.

https://jsfiddle.net/Lr77dgmt/1399/

Upvotes: 1

Related Questions