I am currently working on a dynamic table that is populated using AJAX. This table has multiple columns and is designed to scroll horizontally when the content overflows. However, I want to enhance user experience by adding navigation arrows on either side of the visible part of the table for easy movement left and right, similar to a Bootstrap carousel. The unique feature I aim to incorporate is having these arrows move up and down within the visible section of the table as the page itself scrolls.
While I understand how to implement horizontal scrolling on button click, I am struggling with placing these navigation arrows effectively. Can someone provide suggestions on achieving this functionality using CSS, jQuery, or a combination of both, or any alternative approaches?
Below is the HTML code structure:
<div id="table_div" style="display:none;">
<div style="overflow-x: scroll; position:relative;" id="tablecontent">
<table id="table" class="table table-striped table-hover">
<thead class="vd_bg-green vd_white">
<tr>
<th>Edit</th>
<th>Student Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Father's Name</th>
<th>Address</th>
<th>DOB</th>
<th>Mobile</th>
<th>Email</th>
<th>Gender</th>
<th>Start Year</th>
<th>End Year</th>
<th>Registration No</th>
<th>Roll No</th>
<th>Stream</th>
<th>Section</th>
<th></th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<!--Data generated dynamically via AJAX will be inserted here-->
</tr>
</tbody>
</table>
</div>
</div>