当前位置: 动力学知识库 > 问答 > 编程问答 >

php - How to Make a scrollable table without the column shrinking?

问题描述:

I need to make a scrollable menu, currently, I'm using table to create the button and got it working as below.

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.

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.

<!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>

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

网友答案:

Use the bootstrap table class ".table-responsive" and use the following css code-

.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;
    }
分享给朋友:
您可能感兴趣的文章:
随机阅读: