How to Make a scrollable table without the column shrinking?
<p>I need to make a scrollable menu, currently, I'm using table to create the button and got it working as below. </p>

<p><a href="https://i.stack.imgur.com/7W5x0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7W5x0.jpg" alt="enter image description here"></a></p>

<p>I want the button to be as above, and when I add another button I want it to be hidden and I can use the right button to show the button on the right but hide one button on the left, but when I add a button instead of scrollable, it shrink my button and only stop shrinking after I add about another 10 button and only this time the left and right button to be working. </p>

<p><a href="https://i.stack.imgur.com/Kqx6t.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kqx6t.jpg" alt="enter image description here"></a></p>

<p>What I'm looking for is that only 9 button as the first picture button to be shown and the rest of the button that I'll be adding will need to be scroll using the right button.</p>

<pre><code>&lt;!DOCTYPE html&gt;

&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style&gt;
        #header {
            border-style:solid;
            border-color:skyblue;
            height:105px;
        }

        #content {
            border-style:solid;
            border-color:skyblue;
            min-height:300px;
            margin-top : 3px;
            margin-bottom : 3px;
        }

        #footer {
            border-style: solid;
            border-color: skyblue;
        }

        #tab {
            display:block;
            vertical-align:top;
            margin-top:1%;
            overflow:auto;
        }

        .pad {
            height:70px;
            width:82px;
            padding:15px 15px 3px 15px;
            text-align:center;
            font-weight:bold;
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            border:solid 1px;
            border-radius: 2px 2px 2px 2px;
        }

        .pad:hover {
            background-color: #4CAF50;
            color: white;
        }

        .button_gmb {
            height:40px;
            width:48px;
            margin-top:-10px;
        }

        .button_gmb:hover {
            height:50px;
            width:58px;
        }

        .next {
            background-image:url('pictures/right.png');
            position:absolute;
            top:8%;
            left:95%;
        }

       .previous {
            position:absolute;
            top:8%;
            left:17%;
        }
   &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
           &lt;script&gt;
     function scrollWinLeft() {
         document.getElementById("a").scrollLeft += -60;
      }

         function scrollWinRight() {
      document.getElementById("a").scrollLeft += 103;
}
  &lt;/script&gt;
       &lt;div id ="header"&gt;
                &lt;img ID ="Image1" src="pictures/logo_kolej.png" style = "margin-top:27px;margin-left:5px;width:180px"/&gt;
                &lt;button class="previous" onclick="scrollWinLeft()"/&gt;Left &lt;/button&gt;
                 &lt;div id = "a" style="position:absolute;top: 3%;left:18%; width:80%;height:50%"&gt;
                  &lt;table border="0" id="tab" style="margin-top:-2px;margin-left:30px; overflow-y:scroll;"  &gt;
                    &lt;tr&gt;
                         &lt;td class="pad"&gt;&lt;a href="home.php?page=home"&gt;&lt;img class="button_gmb" src="pictures/Home.png" /&gt;&lt;br /&gt;Home&lt;/a&gt;&lt;/td&gt;
                          &lt;td class="pad"&gt;&lt;a href="home.php?page=schedule"&gt;&lt;img class="button_gmb" src="pictures/Efficient-Diary-logo.png"/&gt;&lt;br /&gt;Schedule&lt;/a&gt;&lt;/td&gt;
                          &lt;td class="pad"&gt;&lt;a href="home.php?page=finance"&gt;&lt;img class="button_gmb" src="pictures/3-people-logo.png"&gt;&lt;br /&gt;Finance&lt;/a&gt;&lt;/td&gt;
                         &lt;td class="pad"&gt;&lt;a href="home.php?page=chat.php"&gt;&lt;img class="button_gmb" src="pictures/Event.png"/&gt;&lt;br /&gt;Chat&lt;/a&gt;&lt;/td&gt;
                          &lt;td class="pad"&gt;&lt;a href="home.php?page=Gallery.php"&gt;&lt;img class="button_gmb" src="pictures/Apps-Gallery-icon.png"/&gt;&lt;br /&gt;Gallery&lt;/a&gt;&lt;/td&gt;
                         &lt;td class="pad"&gt;&lt;a href="home.php?page=index.php"&gt;&lt;img class="button_gmb" style="margin-right:18px;" src="pictures/logout.png"/&gt;&lt;br /&gt;Logout&lt;/a&gt;&lt;/td&gt;
                          &lt;td class="pad"&gt;&lt;img class="button_gmb" src="pictures/time.png"/&gt;&lt;br /&gt;&lt;/td&gt;
                          &lt;td class="pad"&gt;&lt;img class="button_gmb" src="pictures/time.png"/&gt;&lt;br /&gt;&lt;/td&gt;
                         &lt;td class="pad"&gt;&lt;img class="button_gmb" src="pictures/time.png"/&gt;&lt;br /&gt;&lt;/td&gt;
                         &lt;td class="pad"&gt;&lt;img class="button_gmb" src="pictures/time.png"/&gt;&lt;br /&gt;&lt;/td&gt;
                       &lt;td class="pad"&gt;&lt;img class="button_gmb" src="pictures/time.png"/&gt;&lt;br /&gt;&lt;/td&gt;
                        &lt;td class="pad"&gt;&lt;img class="button_gmb" src="pictures/time.png"/&gt;&lt;br /&gt;&lt;/td&gt;
                         &lt;td class="pad"&gt;&lt;img class="button_gmb" src="pictures/time.png"/&gt;&lt;br /&gt;&lt;/td&gt;
                         &lt;td class="pad"&gt;&lt;img class="button_gmb" src="pictures/time.png"/&gt;&lt;br /&gt;&lt;/td&gt;
                        &lt;td class="pad"&gt;&lt;img class="button_gmb" src="pictures/time.png"/&gt;&lt;br /&gt;&lt;/td&gt;
                        &lt;td class="pad"&gt;&lt;img class="button_gmb" src="pictures/time.png"/&gt;&lt;br /&gt;&lt;/td&gt;
                       &lt;td class="pad"&gt;&lt;img class="button_gmb" src="pictures/time.png"/&gt;&lt;br /&gt;&lt;/td&gt;
                        &lt;td class="pad"&gt;&lt;img class="button_gmb" src="pictures/time.png"/&gt;&lt;br /&gt;&lt;/td&gt;
                          &lt;td class="pad"&gt;&lt;img class="button_gmb" src="pictures/time.png"/&gt;&lt;br /&gt;&lt;/td&gt;
                          &lt;td class="pad"&gt;&lt;img class="button_gmb" src="pictures/time.png"/&gt;&lt;br /&gt;&lt;/td&gt;

                 &lt;/tr&gt;
             &lt;/table&gt;
            &lt;/div&gt;
            &lt;button class="next" onclick="scrollWinRight()"&gt;Right&lt;/button&gt;
        &lt;/div&gt;

   &lt;div id ="content"&gt;
       &lt;div style="margin-left:50px;margin-top:30px;margin-bottom:30px;margin-right:50px;"&gt;
             &lt;?php
             if(isset($_GET['page'])) {
                $page_name = $_GET['page'];
               include("pages/".$page_name.".php");
             }
           ?&gt;
       &lt;/div&gt;
   &lt;/div&gt;

  &lt;div id ="footer"&gt;
       &lt;p style ="text-align:center;margin-top:3px;"&gt;2016 © Copyright Family Management System | All Rights Reserved &lt;/p&gt;
  &lt;/div&gt;
</code></pre>

<p>
   </p>

<p>This is my first project and I really don't know what to do.</p>