htmlcsscolumn-count
column-count causes errors with printing tables
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.
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:
Just for the heck of it, I changed the page size to letter, but it still shows one page:
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.
EDIT: Here's a sample of the code. Because there's so much, and I can't seem to upload a file, you'll have to copy and paste the one table in there a bunch of times (I keep hitting the char limit):
<html xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:cif="cif" xmlns:dck="dck">
<head>
<META http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" type="text/css" href="PATH TO YOUR CSS FILE\YOURCSSFILE.css">
<title lang="en">testing new css</title>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="0" width="100%">
<thead>
<tr>
<th colspan="2" lang="en" valign="middle">
ASSESSMENT NUMBER
</th>
<th colspan="6" lang="en" valign="middle">
OWNERSHIP OF RECORD
</th>
<th colspan="1" lang="en" valign="middle">
TYPE OF ACQUISITION
</th>
<th colspan="1" lang="en" valign="middle">
TITLE SOURCE
</th>
<th colspan="1" lang="en" valign="middle">
PARCEL AREA (ACRES)
</th>
<th colspan="1" lang="en" valign="middle">
PAGE NUMBER
</th>
</tr>
<tr>
<th colspan="2" lang="en" valign="middle">123-11.14-34.00</th>
<th colspan="6" lang="en" valign="middle" align="left" style="text-transform:uppercase">( 1 ) Phillup McCrevice</th>
<th colspan="1" lang="en" valign="middle">R/W</th>
<th colspan="1" lang="en" valign="middle" style="text-transform:uppercase">123-456</th>
<th colspan="1" lang="en" valign="middle">D -
0.571</th>
<th colspan="1" lang="en" valign="middle">7</th>
</tr>
<tr style="font-size: 90%">
<th lang="en" rowspan="1" valign="bottom">PT. NO.</th>
<th lang="en" rowspan="1" valign="bottom">ALIGN. NO.</th>
<th lang="en" rowspan="1" valign="bottom">STATION</th>
<th lang="en" rowspan="1" valign="bottom">OFFSET*</th>
<th lang="en" rowspan="1" valign="bottom">NORTH</th>
<th lang="en" rowspan="1" valign="bottom">EAST</th>
<th lang="en" valign="bottom">BEARING</th>
<th lang="en" valign="bottom">DISTANCE</th>
<th lang="en" valign="bottom">CHORD BEARING</th>
<th lang="en" valign="bottom">CHORD LENGTH</th>
<th lang="en" valign="bottom">ARC LENGTH</th>
<th lang="en" valign="bottom">RADIUS**</th>
</tr>
</thead>
<tbody>
<tr style="font-size: 75%">
<td class="sidepad" valign="middle" align="center" style="text-transform:uppercase">60001</td>
<td class="sidepad" align="right" nowrap valign="middle">UPTOWN ROAD</td>
<td class="sidepad" align="right" nowrap valign="middle">601+21.40</td>
<td class="sidepad" align="right" nowrap valign="middle">-25.687</td>
<td class="sidepad" align="right" valign="middle">206029.1673</td>
<td class="sidepad" align="right" valign="middle">611895.9898</td>
<td class="sidepad" align="right" nowrap valign="middle">S 88°16'50" W</td>
<td class="sidepad" align="right" valign="middle">4.637</td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
</tr>
<tr style="font-size: 75%">
<td class="sidepad" valign="middle" align="center" style="text-transform:uppercase">60106</td>
<td class="sidepad" align="right" nowrap valign="middle">UPTOWN ROAD</td>
<td class="sidepad" align="right" nowrap valign="middle">601+19.70</td>
<td class="sidepad" align="right" nowrap valign="middle">-30.000</td>
<td class="sidepad" align="right" valign="middle">206029.0282</td>
<td class="sidepad" align="right" valign="middle">611891.3548</td>
<td class="sidepad" align="right" nowrap valign="middle">N 19°49'54" E</td>
<td class="sidepad" align="right" valign="middle">247.286</td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
</tr>
<tr style="font-size: 75%">
<td class="sidepad" valign="middle" align="center" style="text-transform:uppercase">60107</td>
<td class="sidepad" align="right" nowrap valign="middle">UPTOWN ROAD</td>
<td class="sidepad" align="right" nowrap valign="middle">603+66.99</td>
<td class="sidepad" align="right" nowrap valign="middle">-30.000</td>
<td class="sidepad" align="right" valign="middle">206261.6491</td>
<td class="sidepad" align="right" valign="middle">611975.2483</td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" nowrap valign="middle">N 19°42'50" E</td>
<td class="sidepad" align="right" nowrap valign="middle">16.300</td>
<td class="sidepad" align="right" nowrap valign="middle">16.300</td>
<td class="sidepad" align="right" nowrap valign="middle">
-
3970.000</td>
</tr>
<tr style="font-size: 75%">
<td class="sidepad" valign="middle" align="center" style="text-transform:uppercase">60108</td>
<td class="sidepad" align="right" nowrap valign="middle">UPTOWN ROAD</td>
<td class="sidepad" align="right" nowrap valign="middle">603+83.41</td>
<td class="sidepad" align="right" nowrap valign="middle">-30.000</td>
<td class="sidepad" align="right" valign="middle">206276.9935</td>
<td class="sidepad" align="right" valign="middle">611980.7466</td>
<td class="sidepad" align="right" nowrap valign="middle">N 66°47'22" E</td>
<td class="sidepad" align="right" valign="middle">5.568</td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
</tr>
<tr style="font-size: 75%">
<td class="sidepad" valign="middle" align="center" style="text-transform:uppercase">60003</td>
<td class="sidepad" align="right" nowrap valign="middle">UPTOWN ROAD</td>
<td class="sidepad" align="right" nowrap valign="middle">603+87.22</td>
<td class="sidepad" align="right" nowrap valign="middle">-25.913</td>
<td class="sidepad" align="right" valign="middle">206279.1878</td>
<td class="sidepad" align="right" valign="middle">611985.8637</td>
<td class="sidepad" align="right" nowrap valign="middle">S 19°46'18" W</td>
<td class="sidepad" align="right" valign="middle">0.226</td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
</tr>
<tr style="font-size: 75%">
<td class="sidepad" valign="middle" align="center" style="text-transform:uppercase">60002</td>
<td class="sidepad" align="right" nowrap valign="middle">UPTOWN ROAD</td>
<td class="sidepad" align="right" nowrap valign="middle">603+86.99</td>
<td class="sidepad" align="right" nowrap valign="middle">-25.914</td>
<td class="sidepad" align="right" valign="middle">206278.9754</td>
<td class="sidepad" align="right" valign="middle">611985.7874</td>
<td class="sidepad" align="right" nowrap valign="middle">S 19°46'18" W</td>
<td class="sidepad" align="right" valign="middle">265.458</td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
</tr>
<tr style="font-size: 75%">
<td class="sidepad" valign="middle" align="center" style="text-transform:uppercase">60001</td>
<td class="sidepad" align="right" nowrap valign="middle">UPTOWN ROAD</td>
<td class="sidepad" align="right" nowrap valign="middle">601+21.40</td>
<td class="sidepad" align="right" nowrap valign="middle">-25.687</td>
<td class="sidepad" align="right" valign="middle">206029.1673</td>
<td class="sidepad" align="right" valign="middle">611895.9898</td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
<td class="sidepad" align="right" valign="middle"> </td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="12" lang="en" valign="middle" align="left">
FIGURE 40000 AREA = 1105.30 SQ. FT. (0.025 ACRES).
<br>
REMAINING AREA = 23767.46 SQ. FT. ( 0.546 ACRES)
<br>
CUMULATIVE REMAINING AREA = 23767.46 SQ.FT (
0.546 ACRES)
</th>
</tr>
<tr>
<th colspan="12" lang="en" valign="middle" align="left" style="text-transform:uppercase">
DEED RECORD OF ACQUISITION: </th>
</tr>
</tfoot>
</table>
</body>
</html>
EDIT: Also, here's my CSS
body
{
column-count: 2;
column-width: 50%;
font-size: 10pt;
color: #000000;
font-family: Arial, Helvetica;
background-color: #ffffff
}
table
{
break-inside: avoid;
border-left-color: #000000;
border-bottom-color: #000000;
font-size: 10pt;
color: #000000;
border-top-color: #000000;
font-style: normal;
font-family: arial;
border-right-color: #000000;
table-border-color-light: #000000;
table-border-color-dark: #000000
}
table.margin
{
margin-left: .5in
}
caption
{
font-size: 14pt;
color: #666633;
font-style: normal;
font-family: arial
}
th
{
border-left-color: #000000;
border-bottom-color: #000000;
color: #000000;
border-top-color: #000000;
font-style: normal;
font-family: arial;
border-right-color: #000000
}
Solution
Without knowing absolutely all the context of your code, it's difficult to be absolutely sure, but it seems that the problem is caused by the fact that your site is working in Quirks mode as there is no !doctype given at the top.
Place this right at the top:
<!doctype html>
See https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
I have tested on Windows11 Edge with and without the !doctype and with it the printer showed all pages. I tested with a couple of dozen tables and ensured the last one was included by setting its text color: red
- How do I serve a static HTML at API endpoint using Rocket?
- How do I return HTML content with Rocket 0.5?
- Download and get HTML code from a website
- Why does Iron render my templated HTML as text?
- Can't get sticky row and column at the same time due to overflow-x
- Masking a part of a border
- External link to a div on a one page Bootstrap site
- Why my form validation while logging in is not working?
- How to Center Main Menu in Rehub Theme on Desktop/Laptop only?
- Iframe "(Site Name) Refused to Connect." Error
- Django Template Not Displaying Vendor Contact and Description Fields
- Make a grid item span to the last row / column in implicit grid
- Js remove all classes from element
- Including html pages in LaTeX appendix
- How do I place two rows in a td cell: top and bottom of the cell?
- Show a default image if src image is not found
- Custom Checkbox not working in Contact Form 7
- Sorting a HTML table
- PHP Scrape HTML Between <pre> tags
- How do I make my text stay within my div column with a scroll bar?
- Encode HTML entities in JavaScript
- Fluid dynamic simulation, with obstacles
- CKEditor Link input not working in modal
- Is there a way to make a grayscale filter apply to the rest of the page when hovering over an element?
- Bootstrap _reboot.scss overriding PrimeNG styles
- jekyll yaml front-matter is turned into <hr> tag by markdown
- How do I create a transition between 2 different font awesome icons?
- How to load up CSS files using Javascript?
- column-count causes errors with printing tables
- adding a border to a transparent div with clip path