JSFiddle - React, Tailwind, and code Playground

by Ashish Sharma

HTML

<table><tr><td id="ploop">
    <textarea id="text"></textarea>
    </td>
    <td id="ploop">
    <textarea id="text"></textarea>
    </td>
    <td id="ploop">
    <textarea id="text"></textarea>
    </td>
    <td id="ploop">
    <textarea id="text"></textarea>
    </td>
    <td id="ploop">
    <textarea id="text"></textarea>
    </td>
    <td id="ploop">
    <textarea id="text"></textarea>
    </td>
    </tr></table>
<input type='button' class='leftArrow' value='left'>
<input type='button' class='rightArrow' value='right'>

CSS

#pliip,
#ploop { color: red; }
table {
   margin: 0;
   padding: 0 4px;
   border-radius: 2px;
   white-space: nowrap;
   color: black;
   cursor: pointer; 
 overflow-y: scroll;
  overflow-x: scroll;
   }
#text{
    width: 600px;
    height:300px;
    
}
.leftArrow{
    position:fixed;
    top:300px;
    left:10px;
}
.rightArrow{
    position:fixed;
    top:300px;
    right:10px;
}

JavaScript

$(".leftArrow").click(function () { 
  var leftPos = $('body').scrollLeft();
  $("body").animate({scrollLeft: leftPos - 600}, 800);
});
var b=$('body').css('width');
$(".rightArrow").click(function () { 
  var leftPos = $('body').scrollLeft();
  $("body").animate({scrollLeft: leftPos + b}, 800);
});