Generating an invoice dynamically with a CSS grid poses some challenges. To maintain a specific format, I need to define the number of rows and columns in advance along with column widths. Using template rows and columns for this purpose restricts the use of 'auto' values.
For instance, consider a grid with 7 columns and 2 rows - the first row has all 7 columns while the second row contains a single column spanning across all 7. Furthermore, this singular column includes a nested grid consisting of 1 row and 3 columns. The HTML setup below illustrates this structure:
https://i.sstatic.net/OSUZcV18.png
Edit Note: While addressing an issue highlighted in the comments, I encountered additional problems with this version as well.
The following code snippet demonstrates the initial setup:
<html>
<head>
<style type="text/css">
body {
font-family: Calibri, monospace;
font-size: 0.8rem;
margin: 1rem;
border: 1px solid;
}
table {
width: 100%;
height: 100%;
border-collapse: collapse;
page-break-inside: auto;
}
td section div {
page-break-inside: avoid;
}
table tbody td {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
main {
display: flex;
flex-direction: column;
height: 100%;
}
#invoiceitems {
display: block;
height: 100%;
text-transform: uppercase;
}
/* Remaining CSS styles... */
</style>
</head>
<body>
<!-- Main content with grid structure -->
</body>
</html>However, issues arise when incorporating this layout inside a table structure, resulting in horizontal overflow as seen in the image here:
https://i.sstatic.net/7C78f2eK.png
I opted for a table to facilitate header continuity across multiple pages, but the underlying structure is causing unwanted scroll and overflow behavior. Can anyone provide insights into what differentiates the table implementation?
Here's the code snippet within a table context:
<html>
<head>
<style type="text/css">
body {
font-family: Calibri, monospace;
font-size: 0.8rem;
margin: 1rem;
border: 1px solid;
}
table {
width: 100%;
height: 100%;
border-collapse: collapse;
page-break-inside: auto;
}
/* Additional table-specific styles... */
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<!-- Content wrapped within a table structure -->
</td>
</tr>
</tbody>
</table>
</body>
</html>Your guidance on addressing these concerns would be greatly appreciated!