JSFiddle - React, Tailwind, and code Playground
HTML
<div class="padding">
<table id="tableqanda" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="5%" class="questionno">Question No.</th>
<th width="27%" class="question">Question</th>
<th width="7%" class="option">Option Type</th>
<th width="11%" class="image">Image</th>
</tr>
</thead>
</table>
</div>
<div class="padding">
<div class="scroll">
<em class="up"></em>
<em class="down"></em>
<table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
<tbody>
<tr class="tableqandarow">
<td width="5%" class="questionno">1</td>
<td width="27%" class="question">What is a RAM?</td>
<td width="7%" class="option">A-E</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr class="tableqandarow">
<td width="5%" class="questionno">2</td>
<td width="27%" class="question">Name 3 car maneuvers you may do in a test?</td>
<td width="7%" class="option">A-F</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
em.down {
display:block;
width:0;
height:0;
border:5px solid;
border-color:#333333 transparent transparent;
position:absolute;
bottom:0px;
right:2px;
cursor: pointer;
}
em.up {
display:block;
width:0;
height:0;
border:5px solid;
border-color:transparent transparent #333333;
position:absolute;
top:0px;
right:2px;
cursor: pointer;
}
.padding {
padding-right: 20px;
position: relative;
}
.scroll {
height: 23px;
overflow: hidden;
}
#tableqanda_onthefly
{
width:100%;
overflow-y: auto;
overflow-x: hidden;
clear:both;
}
#tableqanda_onthefly td
{
border:1px black solid;
}
#tableqanda, #tableqanda_onthefly{
border:1px black solid;
table-layout:fixed;
word-wrap:break-word;
}
#tableqanda{
width:100%;
margin-left:0;
}
#tableqanda td {
vertical-align: middle;
border:1px black solid;
}
#tableqanda th {
border:1px black solid;
text-align:center;
}
.tableqandarow {
border:1px black solid;
}
JavaScript
var ele = $('.scroll');
var scroll = 25;
$('.up').on('click',function() {
ele.scrollTop( ele.scrollTop() - scroll );
});
$('.down').on('click',function() {
ele.scrollTop( ele.scrollTop() + scroll );
});