title: Placing navigation arrows inside a div containing a table to scroll sideways
body: <p>I am creating a table that is dynamically populated by AJAX. There are several columns in the table. Thus the entire content of the table has been designed to scroll horizontally on overflow. But the user needs to use the keyboard arrow keys to move left and right. Instead I want to provide the user with two arrows placed on either side of the visible part of the table to go right and left much like a Bootstrap carousel. But here it differs slightly. When I scroll the page up/down, the arrows should also move up/down within the visible section of the table to allow the user to navigate.</p>
  
  <p>I know how to scroll the table horizontally sideways on button click. But I cannot place these arrows at the either end of the visible section of the table. Can anyone suggest how can this be achieved by either CSS, Jquery or using both or any other approach.</p>
  
  <p>The HTML code is given below -</p>
  
  <pre><code> &lt;div id="table_div" style="display:none;"&gt;
      &lt;div style="overflow-x: scroll; position:relative;" id="tablecontent"&gt;
          &lt;table id="table" class="table table-striped table-hover"&gt;
              &lt;thead class="vd_bg-green vd_white"&gt;
  
                  &lt;tr&gt;
                      &lt;th&gt;Edit&lt;/th&gt;
                      &lt;th&gt;Student Id&lt;/th&gt;
                      &lt;th&gt;First Name&lt;/th&gt;
                      &lt;th&gt;Last Name&lt;/th&gt;
                      &lt;th&gt;Father's Name&lt;/th&gt;
                      &lt;th&gt;Address&lt;/th&gt;
                      &lt;th&gt;DOB&lt;/th&gt;
                      &lt;th&gt;Mobile&lt;/th&gt;
                      &lt;th&gt;Email&lt;/th&gt;
                      &lt;th&gt;Gender&lt;/th&gt;
                      &lt;th&gt;Start Year&lt;/th&gt;
                      &lt;th&gt;End Year&lt;/th&gt;
                      &lt;th&gt;Registration No&lt;/th&gt;
                      &lt;th&gt;Roll No&lt;/th&gt;
                      &lt;th&gt;Stream&lt;/th&gt;
                      &lt;th&gt;Section&lt;/th&gt;
                      &lt;th&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody id="table_body"&gt;
                  &lt;tr&gt;
  
                  &lt;!--Dynamically generated data from AJAX goes here--&gt;
  
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>