OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

column-count causes errors with printing tables

  • Thread starter Thread starter Dave
  • Start date Start date
D

Dave

Guest
Short version: If I use column-count in my CSS and print the page to a PDF, only the first page is printed, regardless of how much data is on the webpage. I have been using this CSS for over 2 years, and it just recently broke. I've tested in Chrome/Edge (v126). It's been supported since chrome 50.

Here is an example of what the webpage should look like using the column-count.

Using Column-Count

As you can see from the scroll bar on the right, there are a lot of these tables. If I print, it only shows one page:

Large Page Size

Just for the heck of it, I changed the page size to letter, but it still shows one page:

small page size

For the HTML, I am using tables (using the all standard <table> tags). They have a header and footer that are a consistent height, but the number of rows can vary.

So, I guess question 1. Does anyone know why column-count is only allowing me to print the first page?

Question 2 Assuming I can't solve the column-count issue, how else can I get the same output? I have tried everything that I can think of, but each fails for various other reasons.

If you look at the first screenshot, in the first column, each table starts at the end of the previous table. In the second column, the same is happening, so the starts of the tables don't line up across columns.

I tried using Display: Flex; for example, but the starts of each table line up across columns, so there are gaps between the end of one table and the start of the next. In a different method it would adjust the heights of the rows so that the tables are overall the same height (even if I set height:).

Thanks in advance.
<p>Short version: If I use <code>column-count</code> in my CSS and print the page to a PDF, only the first page is printed, regardless of how much data is on the webpage. I have been using this CSS for over 2 years, and it just recently broke. I've tested in Chrome/Edge (v126). It's been supported since chrome 50.</p>
<p>Here is an example of what the webpage should look like using the <code>column-count</code>.</p>
<p><a href="https://i.sstatic.net/3KBbp2Kl.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/3KBbp2Kl.png" alt="Using Column-Count" /></a></p>
<p>As you can see from the scroll bar on the right, there are a lot of these tables. If I print, it only shows one page:</p>
<p><a href="https://i.sstatic.net/H3KDvUaO.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/H3KDvUaO.png" alt="Large Page Size" /></a></p>
<p>Just for the heck of it, I changed the page size to letter, but it still shows one page:</p>
<p><a href="https://i.sstatic.net/64CtAFBM.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/64CtAFBM.png" alt="small page size" /></a></p>
<p>For the HTML, I am using tables (using the all standard <code><table></code> tags). They have a header and footer that are a consistent height, but the number of rows can vary.</p>
<p><strong>So, I guess question 1</strong>. Does anyone know why <code>column-count</code> is only allowing me to print the first page?</p>
<p><strong>Question 2</strong> Assuming I can't solve the <code>column-count</code> issue, how else can I get the same output? I have tried everything that I can think of, but each fails for various other reasons.</p>
<p>If you look at the first screenshot, in the first column, each table starts at the end of the previous table. In the second column, the same is happening, so the starts of the tables don't line up across columns.</p>
<p>I tried using <code>Display: Flex;</code> for example, but the starts of each table line up across columns, so there are gaps between the end of one table and the start of the next. In a different method it would adjust the heights of the rows so that the tables are overall the same height (even if I set <code>height:</code>).</p>
<p>Thanks in advance.</p>
Continue reading...
 

Latest posts

ن
Replies
0
Views
1
نعمان منذر محمود الجميلي
ن
Top