Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Printing dynamic table - how to make as good as possible

Tags:

html

printing

I'm generating dynamically table N columns x M rows

and I'm trying to make it print with default printing options as good as possible

So,

Whenever we're printing the table on A1/A2/A3/A4 paper, then table should TRY to occup full one piece of paper, its avaliable space with as biggest font as possible (people who will read it may not have perfect eyesight)

But when I go to e.g Microsoft Edge (it has tools to manipulate scaling, margins and stuff, so that's why I used it, which kinda worries me too, that printing results on Chrome/FF/Edge may vary)

and use preview (CTRL+P), then it always either takes more than one page, or uses only e.g 40% of avaliable space

A4 paper, no margins:

fit to the printing area:

enter image description here

real size:

enter image description here

Part of Code:

<!DOCTYPE html>
<html lang="pl-PL">
<head>
<title>Plan zajęć</title>

<style>         
    .printable-tables 
    {
        white-space: nowrap;
    }

    .printable-tables > table 
    {
        display: inline-table;
    }

    @page 
    {
        size: landscape;
    }

    .printable-tables > table 
    {
        page-break-before: always;
        page-break-after: always;
    }

    .header_low_height
    {
    }

    *
    {
    }

    table,
    th,
    td 
    {
        border: 1px solid black;
        padding-left: 5px;
        padding-right: 5px;
    }

    tr td
    {
        border-right-style: solid;
        border-right-width: 1pt;
        border-bottom-style: solid;
        border-bottom-width: 1pt;
        padding-right: 5.4pt;
        padding-left: 5.65pt;
        text-align: center
    }

    .vert 
    {
        writing-mode: vertical-lr;
    }

    th {
    }

    .td_low_height
    {
    }


    .dayName 
    {
        padding: 8px;
        text-align: center;
        font-weight: bold;
    }

    .rotate 
    {
        transform: translateX(-30%) rotate(0.5turn);
    }

    .top_border 
    {
        border-top: 3px solid black
    }
</style>

</head>
<body>
    <table style="border: 1pt solid #000000; border-collapse:collapse">
        <tr class="header_low_height">
            <th rowspan="2" style=""> 
                <p><span>Kolejność godzin lekcyjnych</span></p>
            </th>
            
            <th colspan="31" style=""> 
                <p><span>Nauczyciele <br> (przydział godzin lekcyjnych w klasach)</span></p>
            </th>
        </tr>
        
        <tr class="header_low_height">
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>         
            <td class="vert dayName">John Kovalsky</td>     
        </tr>

        <tr>            
            <td>1. 07:55:00 - 08:40:00</td>         
            <td>-</td>          
            <td>OPa</td>            
            <td>IV</td>         
            <td>-</td>          
            <td>IIIB</td>           
            <td>-</td>          
            <td>IA</td>         
            <td>VIIB</td>           
            <td>VIII</td>           
            <td>-</td>          
            <td>IIIA</td>           
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>0</td>          
            <td>IB</td>         
            <td>-</td>          
            <td>OPb</td>            
            <td>II</td>         
            <td>-</td>          
            <td>-</td>          
            <td>VIIA</td>           
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>VI</td>         
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>V</td>
        </tr>
        <tr>            
            <td>2. 08:50:00 - 09:35:00</td>         
            <td>-</td>          
            <td>OPa</td>            
            <td>V</td>          
            <td>-</td>          
            <td>IIIB</td>           
            <td>-</td>          
            <td>IA</td>         
            <td>IV</td>         
            <td>VIII</td>           
            <td>-</td>          
            <td>IIIA</td>           
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>0</td>          
            <td>II</td>         
            <td>-</td>          
            <td>OPb</td>            
            <td>IB</td>         
            <td>-</td>          
            <td>-</td>          
            <td>VIIB</td>           
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>VIIA</td>           
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>VI</td>
        </tr>
        <tr>            
            <td>3. 09:45:00 - 10:30:00</td>         
            <td>-</td>          
            <td>OPa</td>            
            <td>VIIB</td>           
            <td>-</td>          
            <td>IIIB</td>           
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>V</td>          
            <td>-</td>          
            <td>IIIA</td>           
            <td>II</td>         
            <td>-</td>          
            <td>VI</td>         
            <td>0</td>          
            <td>IA</td>         
            <td>-</td>          
            <td>OPb</td>            
            <td>-</td>          
            <td>IB</td>         
            <td>-</td>          
            <td>VIII</td>           
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>IV</td>         
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>VIIA</td>
        </tr>
        <tr>            
            <td>4. 10:40:00 - 11:25:00</td>         
            <td>-</td>          
            <td>OPa</td>            
            <td>VIII</td>           
            <td>-</td>          
            <td>IIIB</td>           
            <td>-</td>          
            <td>-</td>          
            <td>VI</td>         
            <td>-</td>          
            <td>-</td>          
            <td>IIIA</td>           
            <td>II</td>         
            <td>-</td>          
            <td>VIIB</td>           
            <td>0</td>          
            <td>-</td>          
            <td>-</td>          
            <td>OPb</td>            
            <td>IA</td>         
            <td>IB</td>         
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>-</td>          
            <td>V</td>          
            <td>IV</td>         
            <td>-</td>          
            <td>-</td>          
            <td>VIIA</td>
        </tr>
    </table>
</body>
</html>

Here's full code (due to characters limit):

https://pastebin.com/raw/36UuuPZy

How to print huge tables right?! :O

like image 567
Axelly Avatar asked Oct 27 '21 18:10

Axelly

People also ask

Can we create dynamic table in HTML?

First a dynamic HTML Table is created using JavaScript createElement method. The Header Row will be built using the first element of the Array as it contains the Header column text values.

2 Answers

I added a javascript method FitFontSize to create diffrent layouts for different print sizes. it will try to reduce font size automatically when the table exceeds one page, and keep default font size if the table fit height of print paper.

    let papers = [
       {name:'a1', width:'84cm', height:'58cm', fontSize:20},
       {name:'a2', width:'59cm', height:'41cm', fontSize:18},
       {name:'a3', width:'42cm', height:'28cm', fontSize:16},
       {name:'a4', width:'27cm', height:'16cm', fontSize:14}
    ];
    // the fontSize is the default font size for diffrent paper size
    FitFontSize('t', papers);

here is the full code and a live demo

<!DOCTYPE html>
<html lang="pl-PL">
<head>
<title>Plan zajęć</title>

<style>
    table {
        table-layout:fixed;
        width:100%;
        height:100%;
    }

    @media screen {
        .sp-container {
            position:absolute;
            left:-99999px;
            top:-99999px;
        }
    }

    .sp-container-a4 .dayName {
        padding:0;
    }

    @media print {
        @page
        {
            size: landscape;
            padding: 0;
            margin:0.5em;
        }

        html, body {padding:0; margin:0; height:100vh; overflow:hidden;}
        .sp-container {display:none;}
        .sp-hide-on-print {display:none;}
    }

    @media print and (min-width: 10cm) {
        .sp-container-a1 {display:none;}
        .sp-container-a2 {display:none;}
        .sp-container-a3 {display:none;}
        .sp-container-a4 {display:block;}
    }

    @media print and (min-width: 30cm) {
        .sp-container-a1 {display:none;}
        .sp-container-a2 {display:none;}
        .sp-container-a3 {display:block;}
        .sp-container-a4 {display:none;}
    }

    @media print and (min-width: 50cm) {
        .sp-container-a1 {display:none;}
        .sp-container-a2 {display:block;}
        .sp-container-a3 {display:none;}
        .sp-container-a4 {display:none;}
    }

    @media print and (min-width: 80cm) {
        .sp-container-a1 {display:block;}
        .sp-container-a2 {display:none;}
        .sp-container-a3 {display:none;}
        .sp-container-a4 {display:none;}
    }

    table,
    th,
    td
    {
        border: 1px solid black;
        /*padding-left: 5px;
        padding-right: 5px;*/
    }

    tr td
    {
        border-right-style: solid;
        border-right-width: 1pt;
        border-bottom-style: solid;
        border-bottom-width: 1pt;
        /*padding-right: 5.4pt;
        padding-left: 5.65pt;*/
        text-align: center
    }

    .vert
    {
        writing-mode: vertical-lr;
    }

    .dayName
    {
        padding: 8px;
        text-align: center;
        font-weight: bold;
    }

    .rotate
    {
        transform: translateX(-30%) rotate(0.5turn);
    }

    .top_border
    {
        border-top: 3px solid black
    }
</style>

</head>
<body>
    <button class="sp-hide-on-print" onclick="changeRows(20);">20 rows</button>
    <button class="sp-hide-on-print" onclick="changeRows(50);">50 rows</button>

    <table id="t" style="border: 1pt solid #000000; border-collapse:collapse">
        <colgroup>
            <col style="width:11em;" />
        </colgroup>
        <tbody>
            <tr class="header_low_height">
                <th rowspan="2" style="">
                    <p><span>Kolejność godzin lekcyjnych</span></p>
                </th>
                <th colspan="31" style="">
                    <p><span>Nauczyciele <br> (przydział godzin lekcyjnych w klasach)</span></p>
                </th>
            </tr>
            <tr class="header_low_height">
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
                <td class="vert dayName">John Kovalsky</td>
            </tr>
        </tbody>
    </table>
</body>
<script>
function changeRows(num) {
    addRows(num);
    layoutForPrint();
}

function addRows(num) {
    var table = document.getElementById('t');
    var tbody = table.querySelector('tbody');
    tbody.querySelectorAll('tr.data').forEach((tr)=>tr.remove());
    for (let i=0; i<num; i++) {
        let tr = document.createElement('tr');
        tr.classList.add('data');
        let html = '';
        html += '<td>8. 14:40:00 - 15:25:00</td>';
        html += '<td>row' + (i+1) + '</td>';
        for (let j=0; j < 30; j++) {
            html += '<td>' + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 3) + '</td>';
        }
        tr.innerHTML = html;
        tbody.appendChild(tr);
    }
}
// add test data
addRows(50);

function FitFontSize(id, papers) {
    function _resizeContent(el, paper) {
        let fontSize = paper.fontSize || 12;
        let container = document.createElement('div');
        container.classList.add(`sp-container`);
        container.classList.add(`sp-container-${paper.name}`);

        let css = 'box-sizing:border-box;';
        css += 'overflow-y:auto;';
        css += 'margin:0;padding:0;';
        css += `font-size:${fontSize}px;`;
        css += `width:${paper.width};height:${paper.height};`;
        container.setAttribute('style', css);
        container.innerHTML = el.outerHTML;

        document.body.appendChild(container);
        let tb = container.querySelector('table').classList.remove('sp-hide-on-print');
        container.querySelectorAll('[id]').forEach((el)=>el.removeAttribute('id'));

        // if the table overflowed try to reduce padding of td elements
        if (container.scrollHeight > container.clientHeight) {
            container.querySelectorAll('td').forEach(function(td) {
                td.style.padding = '0';
            });
        }
        // try to reduce the font size
        while (container.scrollHeight > container.clientHeight && fontSize > 5) {
            container.style.fontSize = `${--fontSize}px`;
            container.querySelector('col').style.width = fontSize * 30 / devicePixelRatio + 'px';
            container.querySelectorAll('td:not(.dayName)').forEach(function(td) {
                td.style.lineHeight = `${fontSize}px`;
            });
        }

        container.style.width = '100%';
        container.style.height = '100%';
        container.style.overflow = 'hidden';
    }

    document.querySelectorAll('.sp-container').forEach((c)=>c.remove());
    let el = document.getElementById(id);
    for (let paper of papers) {
        _resizeContent(el, paper);
    }
    el.classList.add('sp-hide-on-print');
}

function layoutForPrint() {
    let papers = [
       {name:'a1', width:'84cm', height:'58cm', fontSize:20},
       {name:'a2', width:'59cm', height:'41cm', fontSize:18},
       {name:'a3', width:'42cm', height:'28cm', fontSize:16},
       {name:'a4', width:'27cm', height:'16cm', fontSize:14}
    ]
    FitFontSize('t', papers);
}

layoutForPrint();
</script>
</html>

enter image description here

like image 169
emptyhua Avatar answered Oct 10 '22 19:10

emptyhua

Here's another possible solution:

<script src="https://gist.github.com/jcollins-bioinfo/ee23a450529342a119ac3e4b12ed3c0a.js"></script>

Source code for HTML table:

Run snippet above, or, get directly from: https://gist.githubusercontent.com/jcollins-bioinfo/ee23a450529342a119ac3e4b12ed3c0a/raw/108fc18b1eb3ae55590dbf69c5741dce5caf0c5f/printing-dynamic-table-how-to-make-as-good-as-possible.html

Printing

Table printed neatly (no headers/footers, minimal margin, max spacing, size A4 paper) in Google Chrome using the shown settings (custom size == 34%)

showing chrome print dialogue

And here's how I generated the HTML file (using Python Jupyter Notebook)

Ran this code in a notebook cell, where the input html file to pd.read_html can be just a file containing the <table>...</table> HTML data:

import dash

from dash import html
from dash import dash_table
from jupyter_dash import JupyterDash

import pandas as pd

app = JupyterDash()

df2 = pd.read_html("name-of-html-file.html", header=[0, 2])[0] # just change this line, for input filename path

app.layout = html.Div([
    dash_table.DataTable(
        id='table',
        columns=[{
            "name": ["Kolejność godzin lekcyjnych"],
            "id": "main_h1"
        }] + [{
            "name": [x1, x2],
            "id": f"{x1}_{x2}"
        } for x1, x2 in df2.columns],
        data=[
            {
                **{
                    "main_h1": df2.index[n]
                },
                **{f"{x1}_{x2}": y
                   for (x1, x2), y in data},
            } for (n, data) in
            [*enumerate([list(x.items()) for x in df2.T.to_dict().values()])]
        ],
        merge_duplicate_headers=True,
    )
])

app.run_server(mode="inline")

Then, I used Chrome DevTools to select the displayed in-notebook Dash app data table, selected only the HTML table tagged element, and copied it to clipboard:

screenshot of chrome devtools

Finally, I simply pasted that html table code into the HTML doc template you provide in your question (thus keeping your specific style code in the <head> tag, etc.). And saved that as an HTML file, opened that file in Chrome, and pressed cmd/ctrl-P to open the print dialogue, as shown above in screenshot. 🙂

like image 2
John Collins Avatar answered Oct 10 '22 19:10

John Collins
Sign in to Comment

Related questions

How to close the Bootstrap modal after submit?
Who or what is injecting "data-contrast" spans into my website (at night) and how to stop it?
Toggle class on orientation change in javascript
How to get more information to debug 404 error
Tooltip box showing upwards instead of bottom
Canvas HTML5: Display rect coordinates on mousemove
Identifying a DOM element without an ID value
Why does the CSS cursor property not work for the styled scrollbar?
Ace editor 'named entity expected got none' error
Applying border-radius to bootstrap 5 table
How can I select only elements which are first children of a container by class?
Label rows and columns of a matrix in R Markdown with Latex and HTML rendering
How to position-absolute a div only vertically?
How can I delete a specific JSON array (consultas) embedded within another JSON array (f7Contacts) both saved in a single localSorage key?
CSS - drawing lines between dynamically sized boxes
having issue animating my svg file using css
iOS 15 minimized address bar issue with fixed position, full screen content
GetBoundingClientRect but relative to the entire document
multiple select element - onchange
Create a waveform of the full track with Web Audio API

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!