JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<p id="debug"></p>

<div id="page-1" class="page">
<table id="table">
    <tr>
        <th>Product</th>
        <th>Chemical Description</th>
        <th>Form At 25&deg;C</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>Stepanol&reg; AM</td>
        <td>Ammonium Lauryl Sulfate</td>
        <td>Liquid</td>
        <td><a href="#">Request Sample</a> <a href="#">My Notes</a> <a href="#">Bookmark</a></td>
    </tr>
    <tr>
        <td>Stepanol&reg; AM</td>
        <td>Ammonium Lauryl Sulfate</td>
        <td>Liquid</td>
        <td><a href="#">Request Sample</a> <a href="#">My Notes</a> <a href="#">Bookmark</a></td>
    </tr>
    <tr>
        <td>Stepanol&reg; AM</td>
        <td>Ammonium Lauryl Sulfate</td>
        <td>Liquid</td>
        <td><a href="#">Request Sample</a> <a href="#">My Notes</a> <a href="#">Bookmark</a></td>
    </tr>
    <tr>
        <td>Stepanol&reg; AM</td>
        <td>Ammonium Lauryl Sulfate</td>
        <td>Liquid</td>
        <td><a href="#">Request Sample</a> <a href="#">My Notes</a> <a href="#">Bookmark</a></td>
    </tr>
    <tr>
        <td>Stepanol&reg; AM</td>
        <td>Ammonium Lauryl Sulfate</td>
        <td>Liquid</td>
        <td><a href="#">Request Sample</a> <a href="#">My Notes</a> <a href="#">Bookmark</a></td>
    </tr>
    <tr>
        <td>Stepanol&reg; AM</td>
        <td>Ammonium Lauryl Sulfate</td>
        <td>Liquid</td>
        <td><a href="#">Request Sample</a> <a href="#">My Notes</a> <a href="#">Bookmark</a></td>
    </tr>
    <tr>
        <td>Stepanol&reg; AM</td>
        <td>Ammonium Lauryl Sulfate</td>
        <td>Liquid</td>
        <td><a href="#">Request Sample</a> <a href="#">My Notes</a> <a href="#">Bookmark</a></td>
    </tr>
    <tr>
        <td>Stepanol&reg; AM</td>
        <td>Ammonium Lauryl Sulfate</td>
        <td>Liquid</td>
        <td><a href="#">Request Sample</a> <a href="#">My Notes</a> <a href="#">Bookmark</a></td>
    </tr>
    <tr>
        <td>Stepanol&reg; AM</td>
       ...

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700,700italic);

body {
    font-family: Roboto;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}

th {
    background-color: #f0f0f0;
    border-right: 1px solid #dddddd;
    padding: 1em 0.5em;
    text-transform: uppercase;
    font-weight: 500;
    text-align: left;
}

th:last-child { border: none; }

td {
    padding: 0.3em 0.5em;
}

td a {
    display: inline-block;
    background-color: #becac8;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 500;
    padding: 0.3em 0.5em;
    border-radius: 1em;
    margin-bottom: 0.2em;
}

.page {
    width: 100%;
    height: 300px;
    margin-bottom: 1em;
    padding-bottom: 1.5em;
}

#page-1 { background-color: #edfbef; }

#page-2 { background-color: #f3efdb; }

JavaScript

$(function() {
    // Check total height of all table rows on page load
    moveRows();
    
    // Check height of table rows on window resize
    $(window).on('resize', function() {
        moveRows();
    });
    
    function moveRows(){          
        // Get height of Page 1 and set
        var $pageHeight = $('#page-1').height();
        
        // Keep removing table rows until height of all does not exceed 'Page' height
        if( ( $('#table').height()) > $pageHeight ){
            var row = $('#table tr:not(th):last').remove().clone();
            
            $('#page-2 #table-2').append(row);
            
            // $('#table tr:not(th):last').remove();
            moveRows();
        } else if ( ( $('#table').height()) < $pageHeight ){
            var row = $('#table-2 tr:not(th):last').remove().clone();
            
            $('#page-1 #table').append(row);
        }
    }
});