Fill a Bootstrap Responsive table vertically

Question

I would like to use a bootstrap solution to be able to dynamically generate columns, that contains elements, and have an overflow of this column as a horizontal scroll.

My project should display a product list ordered by their brand. So a column is a brand and in the column are many products.

I saw that the Bootstrap responsive table might be a solution but I can't make it fit my needs. This table organize the data by row when I need to organize them by column.

Here is an image of how it should be :

The code below is generated using JS. I'm building my products and I'm pushing them in a "col-3" that is my brand. Works well as long as I have 4 brands maximum. If I add a 5th one, this last column is pushed under one of the existing one. That is exactly what I'm trying to change. I want this 5th column to be at the same 'level' of the others and to have a horizontal scroll on my brand container.

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

What version of Bootstrap are you using? In BS4 you might be able to take advantage of `col` which will just make however many are present equal-width. — Robert, Feb 12 '18 at 15:52

kevinmrohr · Answer 1 · 2018-02-12T15:46:48.860

You can do this with bootstrap's grid system.

.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

I edited my demand with some code and a better description. I'm already using some solution like you proposed but it actually doesn't work in my case. — Alk, Feb 10 '18 at 21:55

score 0 · Accepted Answer · answered Feb 12 '18 at 20:04

0

Searching deeper on the internet I found a solution I could adapt to fit mine : TW Bootstrap: How to overflow columns

Thanks for your time.

answered Feb 12 '18 at 20:04

Alk

658
2
12
23

Fill a Bootstrap Responsive table vertically

2 Answers2