Question

我使用“表格响应”类在bootstrap中开发了一个表，它按预期工作，但由于表格相当大，并且将在一系列设备上使用，我需要使其更加用户友好。我搜索了论坛，但找不到我想要的东西。

是否可以让响应表底部出现的滚动条始终可见，而不仅仅是在屏幕最小化到一定程度时？

还有什么方法可以复制表顶部的滚动条吗？由于表格很长，因此在顶部和底部可以看到它是一个更好的解决方案。

Answer 1

对于顶部的水平滚动条，请尝试使用jquery.doubleScroll plugin

jQuery的：

$(document).ready(function(){
  $('.table-responsive').doubleScroll();
});

Answer 2

如果我找对你。使表所在的容器具有固定的高度，并将溢出属性设置为auto。通过这样做，你的表不能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>def@somemail.com</td>
      </tr>      
      <tr class="success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="active">
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

</body>
</html>

Answer 3

然后你去

~/Library/MobileDevice/Provisioning Profiles

Bootstrap响应表滚动条顶部/底部＆amp;始终可见

3 个答案: