Missing table bottom border when it breaks over pages

Hello @Sander @Marten @hamelj @Erik

I have one more question regarding dynamic table and Connect template

I have table which breaks over pages.

When table breaks to other pages the bottom border is missing.

Is there any way to fix it?

See example:

Hi @Odyn,

If you have a border-bottom set on “table” it should be visible on every page, but I think in your template you only set a border on certain rows.

Maybe something like this:

table:not(:last-of-type) {
	border-bottom: 1px solid black;
}

Looks much better, but how i can apply this selector only for particular table with specified class name?

Ok this way should be good:

.table--sliced:not(:last-of-type) {
	border-bottom: 1px solid black;
}

Ok i am struggling a little because when use it, then some additional border appears at the end of document.

This red border is table border 1px solid red;

Everything working fine but how to get rid of lost border bottom to be not displayed? @Sander

I understand from your PM that your selector is now .table–sliced { border:botom: 1px solid red }. I’m not sure why you removed :not(:last-of-type), that part should have prevented it from being applied at the end. I’m afraid all I can do is guess since I can’t see your actual HTML and CSS.

Sorry Sander i just dont understand why this border is not showing.

When I use You not(:last-of-type) it behave in same way, so all bottom-borders are on place fine, but this additional border appears also at the end

Well what I did now:

/* Table theme: Striped */
.table--sliced {
	border: 1px solid black;
	border-collapse: separate;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	/*border-bottom: 0px;*/
	/*margin-bottom: 0em;*/
	margin-bottom: 0em;
	font-size: 9pt;
	/*width: 96% !important;*/
	/*margin-left: 0.18in !important;*/
	border-bottom: 3px solid red; // This property set border under table and its ok
}

But at the end we have one more additional border:

So this is the end of table, and at the end of everything this border appears also. Is there any way to disable that?

There are a lot of code, can I send You some anonimized template and data mapper to present the issue? @Sander

:last-of-type only looks at the tag name (table), so if there are any tables after the last .table–sliced it won’t work - regardless of the classes on those tables.

Since you want to target tables immediately preceding a page break you could make use of the fact that we add a page_break_after class to elements that precede a page break:

.table--sliced.page_break_after {
	border-bottom: 3px solid red;
}

An alternative would be to add a border style in a post-pagination script where you can see exactly how many .table–sliced matches there are.

I tried this atm with page break after and it works fine for the breaked tables and end but inside the middle this red line shows in places where should not.

Could You please see my presets? @Sander

I added that code to the files you sent me and it looks fine to me. Can you please post a screenshot?

Sure I will, for example my css now looks like this:

/* Table theme: Striped */
.table–sliced {
border: 1px solid black;
border-collapse: separate;
border-top: 0px;
border-left: 0px;
border-right: 0px;
/border-bottom: 0px;/
/margin-bottom: 0em;/
margin-bottom: 0em;
font-size: 9pt;
/width: 96% !important;/
/margin-left: 0.18in !important;/
border-bottom: 3px solid red;
}

.table–sliced.page_break_after { border-bottom: 3px solid red; }

And how looks in output (data mapper item 6)

Page 1 table:

Page 2 after table breaks

This RED line at the end, should not be there. @Sander

@Odyn remove the “border-bottom: 3px solid red” line from the .table–sliced rule.

This border is almost ideal, add in places where should be missing @Sander but its still visible in some situations:

First page of invoice on some documents

image

End sometimes:

image

Sometimes for some reasons its visible :confused:

@Odyn that is the “border: 1px solid black” style in your .table–sliced rule. I don’t understand why that line is there, I think you can remove these lines:

border: 1px solid black;
border-top: 0px;
border-left: 0px;
border-right: 0px;
/ *border-bottom: 0px;* /

@Sander

Removed and this do not changed nothing, well the bottom border on first page do not appear.

Is there any chance that You will review my css, because probably i dont see the issue :confused:

@Odyn could you share the template and sample data?

Already shared with both of You

I dont understand why this border at the bottom sometimes display in wrong places.

Generally its missing when table box (Service box) breaks, when we fix it then it appears in other places of invoice where it should not be. @Erik

After offline conversations we found the following solution using CSS selectors.

.table--sliced.page_break_before { 
    border: none !important; 
}
.table--sliced .separatorRow:last-child {
    display:none;
}
.table--sliced.page_break_before .separatorRow:last-child {
    display:table-row;
}
.serviceSurchargesPricing + .serviceSurcharges td.serviceSurchargesRecord {
	border-top-width: 0px !important;
}

More info on CSS selectors is found here:

1 Like

Problem has been solved.

I would like to especially thank Erik for his involvement in the search for the error and help in resolving it

1 Like

@Odyn Please suggest what was the exact solution. I am also facing the similar issue.

@Erik This solution is based on class , and we don’t have any decsription of mentioned class. Please suggest the exact solution.