Ich muss ein scrollbares Menü erstellen, zur Zeit verwende ich die Tabelle, um die Schaltfläche zu erstellen, und habe sie wie unten beschrieben funktioniert.Wie mache ich eine scrollbare Tabelle, ohne dass die Spalte schrumpft?
Ich möchte die Taste wie oben sein, und wenn ich eine andere Taste hinzufügen Ich möchte es versteckt werden, und ich kann mit der rechten Taste verwenden Sie die Schaltfläche auf der rechten Seite zu zeigen, aber eine Taste auf der Haut links, aber wenn ich eine Schaltfläche anstelle von scrollbaren hinzufügen, verkleinere ich meine Schaltfläche und höre nur auf zu schrumpfen, nachdem ich etwa 10 weitere Schaltflächen hinzugefügt habe und nur dieses Mal die linke und rechte Schaltfläche, um zu arbeiten.
Was ich suche, ist, dass nur 9-Taste als erste Bild Taste der Taste angezeigt und der Rest sein, dass ich blättere mit der rechten Taste werden müssen würde hinzufügen.
<!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>
Das ist mein erstes Projekt ist, und ich weiß wirklich nicht, was zu tun ist.
Sorry für die späte Antwort, vielen Dank für den Code, haben sie noch nicht testen, ich will Testen Sie es und sagen Sie das Ergebnis. Danke nochmal, mein Herr .. – user5397881