Menu icon Foundation
Foundation Default Responsive Tables

Hello there,

I was wondering how can we make a table stretch all the way across the page and be responsive at the same time. The example below will have more info inside the table cells so I am looking for the whole table to stretch the width of the page and also re-size appropriately. Does Foundation have that by applying default classes? Thanks.

<div class="row">
  <div class="large-12 columns">
 

 <table>
      <thead>
      <tr>
    <caption>Caption</caption>
    
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
    </tr>
      </thead>
    
    <tbody>
      <tr>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
      </tr>
      <tr>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
      </tr>
    </tbody>
  </table>
  </div> 
  </div>

tablesResponsive

Hello there,

I was wondering how can we make a table stretch all the way across the page and be responsive at the same time. The example below will have more info inside the table cells so I am looking for the whole table to stretch the width of the page and also re-size appropriately. Does Foundation have that by applying default classes? Thanks.

<div class="row">
  <div class="large-12 columns">
 

 <table>
      <thead>
      <tr>
    <caption>Caption</caption>
    
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
    </tr>
      </thead>
    
    <tbody>
      <tr>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
      </tr>
      <tr>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
        <td>Blah</td>
      </tr>
    </tbody>
  </table>
  </div> 
  </div>
Bob Sawyer over 4 years ago

Just add a width of 100% to your table.

Bob Sawyer over 4 years ago

Yes, with just a tiny bit of mark-up and the addition of two files - responsive-tables.js and responsive-tables.css, which can be found here: http://zurb.com/playground/responsive-tables

Lee Honeycutt over 4 years ago

Hi Rafi,

Thanks for taking a look at the site. I corrected the problem with row classes in the templates, and I think everything should be in order. Sorry about that, but some of the problems were in the original theme that I only now discovered.

With these changes, though, I'm still not getting the tables to scroll horizontally. Viewing on an iPhone just shows the table extending far to the right, breaking the mobile frame boundaries. Is it working properly on your end? If so, I've got the worst browser caching hangup I've ever encountered.

As for the missing div tag, I couldn't find it anywhere. I checked each div throughout the code, and the NU validator turned up nothing: https://validator.w3.org/nu/

-- Lee

Lee Honeycutt over 4 years ago

Rafi,

I found a very good video on setting up the Foundation Responsive Table:

https://www.youtube.com/watch?v=fXH8wlK3aOc

and as you'll see, it says the .JS file won't work without JQuery present (duh). But it got me to thinking: the theme loads JQuery on line 58, whereas my enquing doesn't load responsive-table.js until line 429.

I think that's probably what's causing the problem, don't you think?

-- Lee

Lee Honeycutt over 4 years ago

OK, moved responsive-table.js right below JQuery.

Still doesn't work.

-- Lee

Lee Honeycutt over 4 years ago

Managed to fix it. Firebug kept throwing the following error: "TypeError $ is not a function." Google search revealed this page:

http://stackoverflow.com/questions/12343714/typeerror-is-not-a-function-when-calling-jquery-function

So in order for responsive-table.js to work in WordPress, you have to replace the first line:

$(document).ready(function() {

with:

jQuery(function ($) {

Works fine, though I still have some styling issues to address.

-- Lee

Elias Sarantopoulos over 4 years ago

And how about being responsive? Does Foundation 5 support that? Thank you.

Rafi Benkual over 4 years ago

The responsive tables built into Foundation http://foundation.zurb.com/docs/components/tables.html are responsive by compressing the width of the columns. The one Bob shared uses another method to allow scrolling on sections.

dack ragus about 3 years ago

Hey does anyone know how to pin (freeze) the first two columns of a table using this script? I have tried tweaking the .js and .css without success. Thanks.

Lee Honeycutt over 4 years ago

So Rafi, I've read a few comments in other posts that people could not get the horizontal scrolling method to work. Is there a trick to getting it working with F5? I've installed the JS and CSS and can't seem to activate the horizontal scroll.

I can provide a website address with .htaccess gateway if you send me your email address. I'd really like to get this working.

Thanks.

-- Lee

Rafi Benkual over 4 years ago

Lee - you can post a code snippet here or drop in into this codepen http://codepen.io/rafibomb/pen/EqCdJ

Lee Honeycutt over 4 years ago

Hi Rafi,

I dropped the .htaccess password temporarily. Here's an example table page:

http://is.gd/DNBrDO

It's a WP site using a child of the Condon starter theme. Here, I've enqued the JS and CSS files into the parent theme file, but I've also tried it into the active child theme, but this doesn't work either.

I also tried placing both files in the same directory, but this also didn't work.

Any suggestions would be much appreciated.

-- Lee

Rafi Benkual over 4 years ago

Inspecting your page, there appears to be an issue with the layout. I was able to make it behave better (not perfect) by correcting a few issues:

<div class="row collapse container">
<div class="row content-wrap">
  <div class="small-12 medium-9 columns main-content-area">
    <div class="single-article" role="main">

You only one .row here. Do container and content-wrap do the same thing?

</div>
<div class="small-12 medium-3 columns">
  <aside id="secondary" class="widget-area" role="complementary">

columns should be direct children of rows.

Also I think one </div> tag was missing.

Start with these and I think you'll see it working right.