JSFiddle - React, Tailwind, and code Playground

by digitalzebra

HTML

<div>
    <button onclick="prev()">PRev</button>
    <button onclick="next()">Next</button>
</div>
<div class="float">
    This is the left side
</div>
<div class="float">
    <table class="content">
        <tr>
            <th>one</th>
            <th>one</th>
            <th>one</th>
            <th>one</th>
            <th>one</th>
            <th>one</th>
        </tr>
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
    </table>	
</div>

<div class="float rightBorder">
    this is some content
</div>

CSS

.float {
    float: left;
}

.rightBorder {
    position: relative;
    left: -71px;
}

.content {
    position: relative;
}

.content td, .content th {
    padding: 5px;
    width: 60px;
    border: 1px solid black;
}

JavaScript

var currPos = 0,
    $eles,
    offset = 0,
    $table;

$(document).ready(function() {
   $table = $(".content");
   $eles = $table.find("th");
});

function prev() {
    var width = $($eles[currPos - 1]).outerWidth();
    offset += width;
    $table.animate({"left": offset}, 100);
    
    currPos--;
};

function next() {
    var width = $($eles[currPos]).outerWidth();
	offset -= width;
    
    $table.animate({"left": offset}, 100);
    
	currPos++;    
};