我需要列出项目或div的可滚动列表，现在我找到了一种使用表格进行滚动的方法，但这是一个可怕的设计。
也许当我减少浏览器窗口时可以对表格进行更好的调整时，可以保留表格，但是现在该表格对于响应式视图来说看起来很恐怖。
我需要一些帮助或建议
码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
table tbody, table thead
{
display: block;
}
table tbody
{
overflow: auto;
height: 200px;
}
table {
width: 350px; /* can be dynamic */
}
th
{
width: 75px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-3 sidenav">
<div class="panel panel-default">
<table class="table table-hover">
<tbody>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</td>
<td class="text-right text-nowrap">
<button class="btn btn-xs btn-info">edit</button>
<button class="btn btn-xs btn-warning">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</td>
<td class="text-right text-nowrap">
<button class="btn btn-xs btn-info">edit</button>
<button class="btn btn-xs btn-warning">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</td>
<td class="text-right text-nowrap">
<button class="btn btn-xs btn-info">edit</button>
<button class="btn btn-xs btn-warning">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</td>
<td class="text-right text-nowrap">
<button class="btn btn-xs btn-info">edit</button>
<button class="btn btn-xs btn-warning">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</td>
<td class="text-right text-nowrap">
<button class="btn btn-xs btn-info">edit</button>
<button class="btn btn-xs btn-warning">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</td>
<td class="text-right text-nowrap">
<button class="btn btn-xs btn-info">edit</button>
<button class="btn btn-xs btn-warning">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</td>
<td class="text-right text-nowrap">
<button class="btn btn-xs btn-info">CCS</button>
<button class="btn btn-xs btn-warning">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</td>
<td class="text-right text-nowrap">
<button class="btn btn-xs btn-info">CCS</button>
<button class="btn btn-xs btn-warning">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-7 text-left">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h3>Test</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
最佳答案
您的桌子高度固定，这会造成问题。获得height: 100%。看下面的代码
将此CSS添加到您的代码中
.panel {
height: 100%;
}
.table {
height: inherit;
}
table tbody {
height: 100%; !important
}
.sidenav {
padding-bottom: 20px;
}
table tbody {
overflow: auto;
/*height: 200px; remove this line from your code*/
}
https://jsfiddle.net/princesodhi/sLmgdk4L/2/