垂直填充 Bootstrap 响应式 table

Question

我想使用 bootstrap 解决方案来动态生成包含元素的列，并使该列溢出作为水平滚动。

我的项目应该显示按其品牌排序的产品列表。所以一个栏目是一个品牌，栏目中有很多产品。

我看到 Bootstrap 响应式 table 可能是一个解决方案，但我不能让它满足我的需要。当我需要按列组织数据时，table 按行组织数据。

这是它应该是什么样子的图片：

以下代码是使用JS生成的。我正在构建我的产品，并将它们推向 "col-3" 这是我的品牌。只要我最多有 4 个品牌，就可以正常工作。如果我添加第 5 个，最后一列将被推到现有列之一之下。这正是我想要改变的。我希望第 5 列与其他列相同 'level' 并且在我的品牌容器上有一个水平滚动条。

<div id="ProductResultList" class="panel-body">
   <div class="col-md-3">
      <table class="table" id="searchTable">
         <thead>
            <tr>
               <th>Brand A</th>
            </tr>
         </thead>
         <tbody>
            <tr class="clickable-row" url="#" productid="2790">
               <td>
                  <div class="row">
                     <div class="col-md-6">
                        <div class="col-md-12">Product 1</div>
                     </div>
                     <div class="col-md-2">
                        <div class="col-md-12 SearchPrice">1.5</div>
                     </div>
                     <div class="col-md-4">
                        <img data-src="holder.js/100x100" class="img-thumbnail" alt="100x100" style="width: 100px; height: 100px;" src="#" data-holder-rendered="true">
                     </div>
                  </div>
               </td>
            </tr>
            <tr class="clickable-row" url="#" productid="2750">
               <td>
                  <div class="row">
                     <div class="col-md-6">
                        <div class="col-md-12">Product 2</div>
                     </div>
                     <div class="col-md-2">
                        <div class="col-md-12 SearchPrice">1.5</div>
                     </div>
                     <div class="col-md-4">
                        <img data-src="holder.js/100x100" class="img-thumbnail" alt="100x100" style="width: 100px; height: 100px;" src="#" data-holder-rendered="true">
                     </div>
                  </div>
               </td>
            </tr>
            ...
         </tbody>
      </table>
   </div>
   <div class="col-md-3">
      <table class="table" id="metasearchTable">
         <thead>
            <tr>
               <th>Brand B</th>
            </tr>
         </thead>
         <tbody>
             <tr class="clickable-row" url="#" productid="2790">
                <td>
                   <div class="row">
                      <div class="col-md-6">
                         <div class="col-md-12">Product 3</div>
                      </div>
                      <div class="col-md-2">
                         <div class="col-md-12 SearchPrice">2.5</div>
                         <div class="col-md-12">la pièce</div>
                      </div>
                      <div class="col-md-4">
                         <img data-src="holder.js/100x100" class="img-thumbnail" alt="100x100" style="width: 100px; height: 100px;" src="#" data-holder-rendered="true">
                      </div>
                   </div>
                </td>
             </tr>
             <tr class="clickable-row" url="#" productid="2790">
                <td>
                   <div class="row">
                      <div class="col-md-6">
                         <div class="col-md-12">Product 4</div>
                      </div>
                      <div class="col-md-2">
                         <div class="col-md-12 SearchPrice">2</div>
                         <div class="col-md-12">la pièce</div>
                      </div>
                      <div class="col-md-4">
                         <img data-src="holder.js/100x100" class="img-thumbnail" alt="100x100" style="width: 100px; height: 100px;" src="#" data-holder-rendered="true">
                      </div>
                   </div>
                </td>
             </tr>
         </tbody>
      </table>
   </div>
</div>

Answer 1

您可以使用 bootstrap 的网格系统来做到这一点。

.product-image {
  height: 75px;
  width: 75px;
}

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script>
      const productCount = 6;
      $(document).ready(function() {
        let theadHtml = '<tr>'
        for (let col=0; col<productCount; col++) {
          theadHtml += '<th>Product ' + col + '</th>'
        }
        theadHtml += '</tr>';
        $('thead').html(theadHtml);
        var bodyHtml = '';
        for (let row=0; row<5; row++) {
         bodyHtml += '<tr>'
         for (let col=0; col<productCount; col++) {
          bodyHtml += '<td>' +
                  '<div class="container">' +
                    '<div class="row">' +
                      '<div class="col-6">' +
                        '<div>This is an amazing wheel barrel</div>' +
                        '<div>10 E</div>' +
                      '</div>' +
                      '<div class="col-6">' +
                        '<img class="product-image"  src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Wheelbarrow_icon.png"/>' +
                      '</div>' +
                    '</div>' +
                  '</div>' +
                '</td>'
         }
         bodyHtml += '</tr>'
        }
        $('tbody').html(bodyHtml);
      });
    </script>
  </head>

  <body>
    <table class="table">
      <thead></thead>
      <tbody></tbody>
    </table>
  </body>

</html>

https://plnkr.co/edit/sybd6FW749SFHr3DAqQ4?p=preview

Answer 2

在互联网上进行更深入的搜索后，我找到了一个适合我的解决方案：TW Bootstrap: How to overflow columns

感谢您的宝贵时间。

垂直填充 Bootstrap 响应式 table

Fill a Bootstrap Responsive table vertically

tabular

twitter-bootstrap

responsive