JSFiddle - React, Tailwind, and code Playground

by Jader Wagner

HTML

<table id="tabela">
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
        <td>Coluna 3</td>
        <td class="no-print">Coluna 4</td>
    </tr>
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
        <td>Coluna 3</td>
        <td class="no-print">Coluna 4</td>
    </tr>
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
        <td>Coluna 3</td>
        <td class="no-print">Coluna 4</td>
    </tr>
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
        <td>Coluna 3</td>
        <td class="no-print">Coluna 4</td>
    </tr>
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
        <td>Coluna 3</td>
        <td class="no-print">Coluna 4</td>
    </tr>
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
        <td>Coluna 3</td>
        <td class="no-print">Coluna 4</td>
    </tr>
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
        <td>Coluna 3</td>
        <td class="no-print">Coluna 4</td>
    </tr>
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
        <td>Coluna 3</td>
        <td class="no-print">Coluna 4</td>
    </tr>
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
        <td>Coluna 3</td>
        <td class="no-print">Coluna 4</td>
    </tr>
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
        <td>Coluna 3</td>
        <td class="no-print">Coluna 4</td>
    </tr>
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
        <td>Coluna 3</td>
        <td class="no-print">Coluna 4</td>
    </tr>
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
        <td>Coluna 3</td>
        <td class="no-print">Coluna 4</td>
    </tr>
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
        <td>Coluna 3</td>
        <td class="no-print">Coluna 4</td>
    </tr>
    <tr>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
        <td>Coluna 3</td>
        <td class="no-print">Coluna 4</td>
    </tr>
    <tr>
       ...

CSS

.no-print {
    opacity:.5;
}
@media print {
    .no-print {
        display:none;
    }
}

JavaScript

$(document).ready(function () {
    $('td').click(function () {
        var indice = $(this).index() + 1;
        $('tr').each(function (index, element) {
            $(this).children('td:nth-child(' + indice + ')').toggleClass('no-print');
        });
    });
    
    var altura = 0;
    $('#tabela tr').each(function(index, element){
        altura += $(this).height();
        if (altura > 100) {
            $('<tr><td colspan="' + $(this).children('td').size() + '"><span class="no-print">quebra de pagina</span></td></tr>').insertBefore($(this));
            altura = 0;
        }
    });
    
});