JSFiddle - React, Tailwind, and code Playground

by Skooljester

HTML

<a id="previous-column" href="#">Previous</a>
<a id="next-column" href="#">Next</a>
<div class="table-container">
    <div class="sliding-window">
        <div id="col-1">
            <p>COLUMN 1This is the content of the first column in the sliding table</p>
        </div>
        <div id="col-2">
            <p>This is the content of the second column in the sliding table</p>
        </div>
        <div id="col-3">
            <p>This is the content of the third column in the sliding table</p>
        </div>
        <div id="col-4">
            <p>This is the content of the fourth column in the sliding table</p>
        </div>
        <div id="col-5">
            <p>This is the content of the fifth column in the sliding table</p>
        </div>
    </div>
</div>

CSS

.table-container {
    width:456px; /* Total width of visible columns + border widths */
    height:300px;
    border:solid 1px #000;
    background-color:#eee;
    overflow:hidden;
}

.sliding-window {
    width:760px; /* Total width of all columns in sliding-window + border widths */
    height:300px;
    overflow:hidden;
}

.sliding-window div {
    float:left;
    width:150px;
    height:300px;
    background-color:#aaa;
    border:solid 1px #999;
}
#col-1 {
    z-index:5;
    position:fixed;
}
#col-2 {
    margin-left:152px;
}

JavaScript

$(document).ready(function() {
    $('#next-column').click(function(event) {
        event.preventDefault();
        $('.table-container').animate({scrollLeft:'+=152'}, 'slow');        
    });
    $('#previous-column').click(function(event) {
        event.preventDefault();
        $('.table-container').animate({scrollLeft:'-=152'}, 'slow');        
    });
});