Table not auto break (with HTML & CSS)

#1

Hello, Community.
I’m a new member.
Print preview is okay but when I click print it has issue with item in table not auto break, it breaks all item next to 2nd page. (More clearly below and with code)

Thanks for all your help and comments.

Source Code:

(I don’t want it) https://drive.google.com/drive/folders/17jBRjRuQfCyteI1m_bpQRmbDBMXWnDfi

(That I want)
https://drive.google.com/drive/folders/1xqy4xrnVU3XUghhg8etnRw4Mp56PN5zn?usp=sharing

#2

Can you just post the rendered html and css as seen from view source once your code has been seen in the browser. Otherwise it is difficult for us to compile a demo to check for solutions.

On quick inspection the table breaks nicely in Chrome but that is only with manipulating the un-compiled code you posted.

Some browsers will have trouble with splitting tables in print preview but you don’t mention which ones you are testing in.

#3

Thanks much for reply.
I’m testing it in chrome. Here’s source code (Link: https://github.com/HKimhab/SaleInvoie_KR/blob/master/SI_KR)

#4

What is being requested is the view of the source code as seen in the browser when you select “show source”. The code in GitHub contains items that pull from other sources before being sent to the browser to be rendered. We need to see the code that is sent to the browser.

1 Like
#5

Yeah it’s it but could you please show me about it (related to css and html only) with template about table’s auto break to next page.

Thank you. YIC

#6

Hello, community.
The issue is page break not auto to next page.

Thank you.
Sale%20Invoiceask

#7

@Anos_SP: to help you, we need to see the rendered HTML and CSS for your page, as has already been explained.

To get the rendered HTML, you simply view the source code, then copy and paste the page here, remembering to format the code so it displays correctly.

To do that, you can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

You will also need to post the CSS for that page.

3 Likes
#8

Thank you. @TechnoBear view the source code in print preview or print pdf?

#9

The source code for the HTML page, before you try to print it.

#11

Link for that source code:https://github.com/HKimhab/trail2/blob/master/sourcecode

#12

No, that’s not we have asked for 4 times now:) (see post #7 for full details of what we need).

In order to help with your problem we need to create a page that renders the design as shown in your screenshot. You are posting your source code files that are linked to multiple resources and contain programming code mixed in the html. We need the HTML as rendered by the browser (view source from the browser) and the CSS that goes along with it. It is impossible for us to copy your whole environment as this seems to be written in angular js and has many dependencies.

If you cannot make a simplified working demo or cannot post a live link to the problem page then we will not really be able to help any further.

At present the best I have been able to construct from code posted produces the print preview output shown in this screenshot and when printed prints exactly like the screenshot so is no help to me in trying to debug your problem.

As I said before that tables are awkward things to print and it may be that your printer decides that it’s best to start the table on a new page rather than just on the small portion left on that first page.

You can try some of the methods mention on SO but as you can see from comments they don’t work everywhere.

3 Likes
#13

Thank you so much.