Question

我有以下带有响应表的html。通过移动设备访问页面时，用户必须水平滚动以查看全部内容，是否有 bootstrap 方法来垂直拆分列，因此移动用户不必水平滚动？ >

a.txt
10

b.txt
3

此处的最后示例（没有更多表）完美显示了所需的行为https://elvery.net/demo/responsive-tables/ 尽管它不是用引导程序完成的。

如果任何人都可以通过bootstrap阐明如何实现这一目标，那就不好了。

Answer 1

使用这种方式

@media screen and (max-width: 640px) {
  table#customDataTable caption {
    background-image: none;
  }
  table#customDataTable thead {
    display: none;
  }
  table#customDataTable tbody td {
    display: block;
    padding: .6rem;
  }
  table#customDataTable tbody tr td:first-child {
    background: #666;
    color: #fff;
  }
  table#customDataTable tbody tr td:first-child a {
    color: #fff;
  }
  table#customDataTable tbody tr td:first-child:before {
    color: rgb(225, 181, 71);
  }
  table#customDataTable tbody td:before {
    content: attr(data-th);
    font-weight: bold;
    display: inline-block;
    width: 10rem;
  }
  table#customDataTable tr th:last-child,
  table#customDataTable tr td:last-child {
    max-width: 100% !important;
    min-width: 100px !important;
    width: 100% !important;
  }
}



<table class="table" id="customDataTable">
  <thead>
    <tr>
      <th>#</th>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
      <th>City</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-th="#">1</td>
      <td data-th="Firstname">Anna</td>
      <td data-th="Lastname">Pitt</td>
      <td data-th="Age">35</td>
      <td data-th="City">New York</td>
      <td data-th="Country">USA</td>
    </tr>
    <tr>
      <td data-th="#">1</td>
      <td data-th="Firstname">Anna</td>
      <td data-th="Lastname">Pitt</td>
      <td data-th="Age">35</td>
      <td data-th="City">New York</td>
      <td data-th="Country">USA</td>
    </tr>
    <tr>
      <td data-th="#">1</td>
      <td data-th="Firstname">Anna</td>
      <td data-th="Lastname">Pitt</td>
      <td data-th="Age">35</td>
      <td data-th="City">New York</td>
      <td data-th="Country">USA</td>
    </tr>
    <tr>
      <td data-th="#">1</td>
      <td data-th="Firstname">Anna</td>
      <td data-th="Lastname">Pitt</td>
      <td data-th="Age">35</td>
      <td data-th="City">New York</td>
      <td data-th="Country">USA</td>
    </tr>
    <tr>
      <td data-th="#">1</td>
      <td data-th="Firstname">Anna</td>
      <td data-th="Lastname">Pitt</td>
      <td data-th="Age">35</td>
      <td data-th="City">New York</td>
      <td data-th="Country">USA</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/lalji1051/ztrjqvL8/

Answer 2

<!DOCTYPE html> <html> <head>   <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.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>

<style>
.table-responsive{
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
}    
</style>

<div class="container">   <h2>Table</h2>   <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>    <div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
    </tbody>   </table>   </div> </div>

</body> </html>

不需要做任何事情，只需将CSS放到我能完美工作的样式标签上我希望这项工作做好。谢谢。

Bootstrap响应表垂直中断

2 个答案: