twitter-bootstrap Bootstrap 响应式表格滚动条顶部/底部和始终可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43660765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Responsive Table Scrollbar Top/Bottom & Always Visible
提问by Antoin McCloskey
I have developed a table in bootstrap using the "table-responsive" class and it works as expected, however as the table is rather large and will be used on a range of devices I need to make it more user friendly. I have searched the forums but cannot find what I am after.
我已经使用“表格响应”类在引导程序中开发了一个表格，它按预期工作，但是由于表格相当大并且将用于一系列设备，我需要使其更加用户友好。我已经搜索了论坛，但找不到我想要的东西。
Is it possible to have the scrollbar which appears at the bottom of responsive table visible at all times and not just when the screen is minimized to a certain extent?
是否可以让出现在响应表底部的滚动条始终可见，而不仅仅是在屏幕最小化到一定程度时？
Also is there any way to replicate this scrollbar at the top of the table as well? As the table will be long it would be a better solution to have it visible at the top and bottom.
还有什么方法可以在表格顶部复制此滚动条？由于桌子会很长，最好让它在顶部和底部可见。
回答by nodws
回答by blecaf
If i get you right. Make the container which the table is in have a fixed with and height, also have the overflow property set to auto. By doing that you table can't be 100% because it will fill its container. That means the table as to have a fixed width also which is larger than it's container to show the overflow effect. See sample below. i hope it helps or point you to the right direction
如果我猜对了。使表格所在的容器具有固定的高度和高度，并将溢出属性设置为自动。通过这样做，您的表不能是 100%，因为它会填满它的容器。这意味着表格也有一个固定的宽度，它大于它的容器以显示溢出效果。请参阅下面的示例。我希望它有所帮助或为您指明正确的方向
.table-cont {
max-width: 400px;
max-height: 200px;
overflow: auto;
border: 1px red solid;
}
.table-cont .table {
min-width: 600px;
}<!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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-cont">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>[email protected]</td>
</tr>
<tr class="success">
<td>Success</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr class="danger">
<td>Danger</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr class="info">
<td>Info</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr class="warning">
<td>Warning</td>
<td>Refs</td>
<td>[email protected]</td>
</tr>
<tr class="active">
<td>Active</td>
<td>Activeson</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>回答by this.girish
and here you go
你去吧
<div class="table-responsive">
<table class=""table table-striped table-bordered">
<!--Rest of the code-->
</table>
</div>
