如何在不缩小列的情况下制作可滚动表？
Posted
技术标签:
【中文标题】如何在不缩小列的情况下制作可滚动表？【英文标题】：How to Make a scrollable table without the column shrinking? 【发布时间】：2016-11-12 21:56:18 【问题描述】：我需要制作一个可滚动的菜单，目前，我正在使用表格来创建按钮并使其工作如下。
我希望按钮与上面一样，当我添加另一个按钮时，我希望它被隐藏，我可以使用右键显示右侧的按钮但隐藏左侧的一个按钮，但是当我添加一个按钮而不是可滚动的按钮，它缩小了我的按钮，只有在我添加了大约 10 个按钮后才停止缩小，只有这一次左右按钮才能工作。
我正在寻找的是只有 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>
这是我的第一个项目，我真的不知道该怎么做。
【问题讨论】：
【参考方案1】：使用引导表类“.table-responsive”并使用以下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;
【讨论】：
对不起，回复晚了，非常感谢代码，还没有测试，我会测试它并告诉你结果。再次感谢先生..以上是关于如何在不缩小列的情况下制作可滚动表？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用机器人框架和 python 在不滚动的情况下获取所有匹配的元素？