2016-07-11 45 views
2

我需要製作一個可滾動的菜單,目前,我正在使用表來創建按鈕,並按如下方式工作。如何在沒有列縮小的情況下製作可滾動表格?

enter image description here

我希望按鈕的上方,當我添加另一個按鈕,我希望它被隱藏,我可以用鼠標右鍵,顯示右側的按鈕,但隱藏在一個按鈕左邊,但是當我添加一個按鈕而不是可滾動的按鈕時,它縮小了我的按鈕,並且只在添加了另一個按鈕後才停止收縮,只有這次左右按鈕才能工作。

enter image description here

什麼我要找的是隻有9按鈕作爲第一個畫面按鈕顯示,並且我將加入將需要滾動使用右按鍵按鈕的其餘部分。

<!DOCTYPE html> 

<html> 
<head> 
    <title></title> 
    <style> 
     #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%; 
     } 
    </style> 
    </head> 
    <body> 
      <script> 
    function scrollWinLeft() { 
     document.getElementById("a").scrollLeft += -60; 
     } 

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

       </tr> 
      </table> 
      </div> 
      <button class="next" onclick="scrollWinRight()">Right</button> 
     </div> 

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

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

這是我的第一個項目,我真的不知道該怎麼辦。

回答

0

使用引導表類「表響應」,並使用下面的CSS代碼 -

.table-responsive { 
     width: 100%; 
     margin-bottom: 15px; 
     overflow-y: hidden; 
     -ms-overflow-style: -ms-autohiding-scrollbar; 
     border: 1px solid #ddd; 
    } 
    .table-responsive > .table { 
     margin-bottom: 0; 
    } 
    .table-responsive > .table > thead > tr > th, 
    .table-responsive > .table > tbody > tr > th, 
    .table-responsive > .table > tfoot > tr > th, 
    .table-responsive > .table > thead > tr > td, 
    .table-responsive > .table > tbody > tr > td, 
    .table-responsive > .table > tfoot > tr > td { 
     white-space: nowrap; 
    } 
    .table-responsive > .table-bordered { 
     border: 0; 
    } 
    .table-responsive > .table-bordered > thead > tr > th:first-child, 
    .table-responsive > .table-bordered > tbody > tr > th:first-child, 
    .table-responsive > .table-bordered > tfoot > tr > th:first-child, 
    .table-responsive > .table-bordered > thead > tr > td:first-child, 
    .table-responsive > .table-bordered > tbody > tr > td:first-child, 
    .table-responsive > .table-bordered > tfoot > tr > td:first-child { 
     border-left: 0; 
    } 
    .table-responsive > .table-bordered > thead > tr > th:last-child, 
    .table-responsive > .table-bordered > tbody > tr > th:last-child, 
    .table-responsive > .table-bordered > tfoot > tr > th:last-child, 
    .table-responsive > .table-bordered > thead > tr > td:last-child, 
    .table-responsive > .table-bordered > tbody > tr > td:last-child, 
    .table-responsive > .table-bordered > tfoot > tr > td:last-child { 
     border-right: 0; 
    } 
    .table-responsive > .table-bordered > tbody > tr:last-child > th, 
    .table-responsive > .table-bordered > tfoot > tr:last-child > th, 
    .table-responsive > .table-bordered > tbody > tr:last-child > td, 
    .table-responsive > .table-bordered > tfoot > tr:last-child > td { 
     border-bottom: 0; 
    } 
+0

很抱歉這麼晚纔回復,非常感謝的代碼,也沒有測試出來呢,我會測試一下並告訴你結果。再次感謝先生。 – user5397881

相關問題