Bootstrap 响应式表格垂直中断

问题描述 投票：0回答：4

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

<!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>

<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>

此处的last示例（不再有表格）完美地展示了所需的行为https://elvery.net/demo/responsive-tables/ 虽然它不是用 bootstrap 完成的。

如果有人能阐明如何使用引导程序实现这一点，我将不胜感激。

html css twitter-bootstrap-3
4个回答
1
投票

另一种解决方案是使用 Bootstrap。

编辑：好的，所以我将其添加为一个片段。它在技术上是可行的，但是我不确定这是否完美地回答了这个问题，因为它是将行转换为列，而不是正确地堆叠列。我知道我确实在以前的项目中解决了这个问题，如果我能找到基于这个块的代码，我可能会回到这个问题上。

#pricing-detailed-section .feature-comparison-table-header-cell {
  padding: 15px;
  border: 1px solid #DFE1E5;
  font-size: 1rem;
  padding-top: 40px;
  height: 100px;
}

#pricing-detailed-section .bold {
  font-weight: 600;
}

#pricing-detailed-section .feature-comparison-table-cell {
  height: 100px;
  border: 1px solid #DFE1E5;
  background-color: #FFF;
  display: table;
}

#pricing-detailed-section .feature-comparison-table-cell p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<!doctype html>
<html lang="en">

<body>
  <div id="pricing-detailed-section">
    <div class="col-md-12" style="padding-top:10%">
      <div class="row">
        <div class="col-md-2 offset-lg-1 col-sm-12 text-center feature-comparison-table-header-cell bold">
          Compare Editions
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
          Lite
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
          Standard
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
          Premium
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
          Professional
        </div>
      </div>
      <div class="row">
        <div class="col-md-2 offset-lg-1 col-sm-12 text-center feature-comparison-table-header-cell">
          Monthly Flat Rate
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
          <p>Free</p>
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
          <p>
            $40/Month
          </p>
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
          <p>
            $50/Month
          </p>
        </div>
        <div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
          <p>
            $60/Month
          </p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

当您切换到移动设备时，它会垂直放置所有内容。请注意段落部分的代码解决了多行字段不居中的问题。

0
投票

这样使用

@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/

0
投票

<!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 放在我放在完美工作的样式标签上 我希望这项工作很好。 谢谢。

0
投票

没有一个答案解决了 OP 的问题，即当屏幕宽度低于某个阈值时，垂直对齐行。

这里有一个工作示例，其中阈值是 500px。根据您的需要更改此值。缩小到窗口宽度来测试结果：

@media all and (max-width:500px) {
  table.table tr {
    display: table;
    width:100%;
    margin: 1em auto;
    border-top: 2px solid;
  }
  table.table td,
  table.table th {
    display: table-row;
    text-align:center;
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<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>
      <tr>
        <td>2</td>
        <td>John</td>
        <td>Smith</td>
        <td>38</td>
        <td>Lisbon</td>
        <td>Portugal</td>
      </tr>
    </tbody>
  </table>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.