Menu icon Foundation
Responsive table rows not aligning

Hi Folks,

I'm using the Responsive Tables tool (http://foundation.zurb.com/responsive-tables.html) for an eCommerce cart summary screen with Foundation 5.0.2.

I'm having a problem with the rows of my table not lining up when it breaks into the small screen.

The first cell for each row of my table is a product image. The source image is 200px high and these images are staying at 200px while the rest of the table rows height's are changing as the screen changes. The result of this is that the images do not line up with the row that corresponds to them.

You can see this on my test site (test payment gateways) you can add some items here: http://beta-babble-kids.azurewebsites.net/large-bibs and then click on the mini cart summary link in the top right corner to see the screen with the responsive table on it.

I've also attached a screen shot of the end result FYI. You can see in this example i have three product rows but only 2 images are showing.

Any clues what I'm doing wrong? Ideally I'd like the images to scale down to fit but cannot see how i can do that.

Regards

Brokentablerows

responsive tablesRows

Hi Folks,

I'm using the Responsive Tables tool (http://foundation.zurb.com/responsive-tables.html) for an eCommerce cart summary screen with Foundation 5.0.2.

I'm having a problem with the rows of my table not lining up when it breaks into the small screen.

The first cell for each row of my table is a product image. The source image is 200px high and these images are staying at 200px while the rest of the table rows height's are changing as the screen changes. The result of this is that the images do not line up with the row that corresponds to them.

You can see this on my test site (test payment gateways) you can add some items here: http://beta-babble-kids.azurewebsites.net/large-bibs and then click on the mini cart summary link in the top right corner to see the screen with the responsive table on it.

I've also attached a screen shot of the end result FYI. You can see in this example i have three product rows but only 2 images are showing.

Any clues what I'm doing wrong? Ideally I'd like the images to scale down to fit but cannot see how i can do that.

Regards

Brokentablerows
Brandon Arnold over 5 years ago

Seems to be scaling down for me. Did you get it to work? https://dl.dropboxusercontent.com/spa/5i52durzznnlkja/jgfqaxqq.png

Martin Kearn over 5 years ago

Hi Brandon,

That is interesting - the image does seem to be scaling down, however the row that contains the image is not scaling.

In your example, the first cell of the first row with the 'red polka dot' bib image is still almost twice the height of the rest of the row. You can see this because the first row has a white background and the second has a slight gradient.

So in your case you are seeing slightly different result but still not the correct outcome.

What browser are you using?

PS: Thanks for your help

Terry Greenlaw over 5 years ago

I'm seeing the same issue with basic, text-only tables. When the left column becomes fixed it displays taller than the columns to the right.

I'm hoping there's an easy solution for this because I really like the approach they have taken with responsive tables.

John Tran almost 5 years ago

Has this been remedied? I have the same issue as Terry. When the left column is fixed, it is taller than the scrolling columns to the right.

Jennifer Tang almost 5 years ago

Hi John, can you post a link to your page or code so we can help you?

Laura over 4 years ago

I have the same issue with only text content on the first column: it seems function setCellHeights (attached below) applies a fixed row height only to the "pinned" table.

function setCellHeights(original, copy) {
    var tr = original.find('tr'),
        tr_copy = copy.find('tr'),
        heights = [];

    tr.each(function (index) {
      var self = $(this),
          tx = self.find('th, td');

      tx.each(function () {
        var height = $(this).outerHeight(true);
        heights[index] = heights[index] || 0;
        if (height > heights[index]) heights[index] = height;
      });

    });

    tr_copy.each(function (index) {
      $(this).height(heights[index]);
    });
  }

My HTML

<table role="grid" class="vr-list  responsive">
            <thead>
              <tr>
                <th>Campaign</th>
                <th>AD-Unit</th>
                <th>views</th>
                <th>Impressions</th>
                <th class="vr-fit">VTR</th>
                <th class="vr-fit">RPM</th>
                <th>Fill rate</th>
                <th class="vr-fit">CTR</th>
                <th class="vr-fit">Revenue</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="vr-list-object">
                  <h5><a href="#">Lo Hobbit</a></h5>
                  <h6>warner bros</h6>
                </td>
                <td>Best Revenue</td>
                <td>123</td>
                <td>2345</td>
                <td>4%</td>
                <td>2€</td>
                <td>np</td>
                <td>-</td>
                <td>23€</td>
              </tr>
              <tr>
                <td class="vr-list-object">
                  <h5><a href="#">Come ti prendi cura della tua auto?</a></h5>
                  <h6>if(Publisher) Publisher</h6>
                </td>
                <td>Your First AD-Unit</td>
                <td>123</td>
                <td>2345</td>
                <td>0.5%</td>
                <td>2€</td>
                <td>np</td>
                <td>-</td>
                <td>2€</td>
              </tr>
              <tr>
                <td class="vr-list-object">
                  <h5><a href="#">Aquafresh</a></h5>
                  <h6>aquafresh</h6>
                </td>
                <td>Best Revenue</td>
                <td>123</td>
                <td>2345</td>
                <td>4%</td>
                <td>2€</td>
                <td>np</td>
                <td>-</td>
                <td>23€</td>
              </tr>
            </tbody>
          </table>

Any idea how to fix this?

Michael LaRoy over 4 years ago

I had some success by commenting out the function,

  tr_copy.each(function (index) {
      $(this).height(heights[index]);
    });

and replacing with the one above, so that it matches heights with the pinned column.

 tr_copy.each(function (index) {
      var self = $(this),
          tx = self.find('th, td');

      tx.each(function () {
        var height = $(this).outerHeight(true);
        heights[index] = heights[index] || 0;
        if (height > heights[index]) heights[index] = height;
      });

    });

Now both columns share the same height!

Laura over 4 years ago

Thanks Michael, that fixed the row height for me! :)

Lee Honeycutt almost 4 years ago

I had a similar problem with the first pinned column having a larger type size than the remaining columns to the right. This only happened on Google and Safari on my iPhone. Using responsive design width on a desktop browser never caused this problem.

The problem is indeed cell height, but the function recommended for responsive-tables.js above did not work for me, so I simply commented out the original funciton and added the following to the CSS file:

table.responsive tr, 
.pinned table.responsive tr {
  height: 2rem;
}

table.responsive td, 
table.responsive th, 
.pinned table.responsive th, 
.pinned table.responsive td { 
     font-size:  0.875rem;
}

This was the only way I could get text in the pinned and sliding columns to match up. Using cell padding and line height never lined things up exactly.

-- Lee

Thom Lohman almost 4 years ago

For anyone finding that Michael's solution wasn't quite doing the job, I found it helpful to loop back through the original table rows after updating the heights and applying each value from the heights array.

Here's a revision to the setCellHeights function that worked for me.

 function setCellHeights(original, copy) {
    var tr = original.find('tr'),
        tr_copy = copy.find('tr'),
        heights = [];

    tr.each(function (index) {
      var self = $(this),
      tx = self.find('th, td');
      tx.each(function () {
        var height = $(this).outerHeight(true);
        heights[index] = heights[index] || 0;
        if (height > heights[index]) heights[index] = height;
      });

    });

    //tr_copy.each(function (index) {
      //$(this).height(heights[index]);
    //});

    tr_copy.each(function (index) {
      var self = $(this),
      tx = self.find('th, td');
      tx.each(function () {
        var height = $(this).outerHeight(true);
        heights[index] = heights[index] || 0;
        if (height > heights[index]) heights[index] = height;
      });
    });

    tr.each(function (index) {
      $(this).height(heights[index]);
    });
  }