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

How to make html table in landscape mode bigger for pdfs

  • Thread starter Thread starter kinruyuu
  • Start date Start date
K

kinruyuu

Guest
So I am creating some html tables for pdfs and I am trying to make sure when it is defaulted to landscape mode. So I was thinking of maybe putting it 90 degrees or putting it sideways. When it gets printed it is still going to print in an a4 format but landscape.

I tried using transform: rotate(-90deg) translateX(-100%); to rotate it 90 degrees but it just doesn't look right it cuts off when it is in portrait format and it is still in portrait format but it is just a lot bigger.

Code:
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;  /* Avoids any scrollbars from appearing */
            width: 210mm;  /* Set the width to the height of an A4 page */
            height: 297mm; /* Set the height to the width of an A4 page */
        }
        @page {
            size: A4 landscape;
            margin: 0; /* Removes default margins set by the browser */
        }
        .specific-table-container {
            position: relative;  /* Relative positioning to facilitate rotation */
            width: 100%;
            height: 100%;
            transform-origin: 0 0; /* Sets the rotation pivot to the top left corner */
            transform: rotate(-90deg) translateX(-100%); /* Rotates the container -90 degrees */
            transform-style: preserve-3d; /* Preserves 3D when transforming */
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
        }
        table {
            width: 297mm; /* Switched dimensions to fill the rotated container */
            height: 210mm;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #666;
            padding: 5px; /* Reduced padding to accommodate more content */
            text-align: left;
            font-size: 12px; /* Adjust font size based on readability */
            vertical-align: middle;
        }
        th {
            font-weight: bold;
        }
        tr:nth-child(odd) {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #ffffff;
        }
    </style>```
<p>So I am creating some html tables for pdfs and I am trying to make sure when it is defaulted to landscape mode. So I was thinking of maybe putting it 90 degrees or putting it sideways. When it gets printed it is still going to print in an a4 format but landscape.</p>
<p>I tried using transform: rotate(-90deg) translateX(-100%); to rotate it 90 degrees but it just doesn't look right it cuts off when it is in portrait format and it is still in portrait format but it is just a lot bigger.</p>
<pre><code> <style>
body, html {
margin: 0;
padding: 0;
overflow: hidden; /* Avoids any scrollbars from appearing */
width: 210mm; /* Set the width to the height of an A4 page */
height: 297mm; /* Set the height to the width of an A4 page */
}
@page {
size: A4 landscape;
margin: 0; /* Removes default margins set by the browser */
}
.specific-table-container {
position: relative; /* Relative positioning to facilitate rotation */
width: 100%;
height: 100%;
transform-origin: 0 0; /* Sets the rotation pivot to the top left corner */
transform: rotate(-90deg) translateX(-100%); /* Rotates the container -90 degrees */
transform-style: preserve-3d; /* Preserves 3D when transforming */
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
}
table {
width: 297mm; /* Switched dimensions to fill the rotated container */
height: 210mm;
border-collapse: collapse;
}
th, td {
border: 1px solid #666;
padding: 5px; /* Reduced padding to accommodate more content */
text-align: left;
font-size: 12px; /* Adjust font size based on readability */
vertical-align: middle;
}
th {
font-weight: bold;
}
tr:nth-child(odd) {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #ffffff;
}
</style>```
</code></pre>
Continue reading...
 

Latest posts

Top