Menu icon Foundation
Responsive Tables & Foundation 5

Did anyone try to use Responsive Table with Foundation 5?
I followed the instruction from http://zurb.com/playground/responsive-tables

Step 1. Added

Step 2. Created table:

ABCABC


AAA0.08%
BBB0.02%
CCC0.18%

It doesn't work on a Small Screen - left column disappears. Large and medium screens seems to be OK.

The code that I downloaded was saved on 7/23/2013.

Maybe it doesn't work with Foundation 5?

Gale K.

tablesresponsive tablesFoundation 5

Did anyone try to use Responsive Table with Foundation 5?
I followed the instruction from http://zurb.com/playground/responsive-tables

Step 1. Added

Step 2. Created table:

ABCABC


AAA0.08%
BBB0.02%
CCC0.18%

It doesn't work on a Small Screen - left column disappears. Large and medium screens seems to be OK.

The code that I downloaded was saved on 7/23/2013.

Maybe it doesn't work with Foundation 5?

Gale K.

Rafi Benkual over 5 years ago

Hi Gale. Can you post a link, example, or your code so we can get you an answer?

Gale K. over 5 years ago

here is the link:

http://67.20.65.122/LegalPower/DUI-charges-DWI-charges/DUI-charges-DWI-charges-in-Nevada.html

There are two table.

1st is very small. Small tables is not affected.
2nd table is large with 6 columns. It doesn't work the way is suppose to.
Here is the code:

Charge
Jail Time
Suspension of License
Community Service/Fine
Fine
Misc.




DUI 1st
Up to 6 Months
90 days
Victim Impact Panel
Up to $1,000
DUI School


DUI 2nd
Up to 6 months
1 year suspension
Yes/up to $1,000/Victim Impact Panel
Up to $1,000
Treatment Program


DUI 3rd
Up to 6 years in prison
3 Year suspension
Up to $5,000
Breath Interlock Device


I tried to fix it myself.
I changed CSS from @media only screen and (max-width: 767px) to @media only screen and (max-width: 16em). Works better than before, but still doesn't work. Put responsive-tables.css at the end of app.css.

This piece that doesn't work: overflow: hidden; overflow-x: scroll;

```HTML

```HTML 

Gale K. over 5 years ago

 ```  <table class="responsive">
            <thead>
              <tr>
                <th>Charge</th>
                <th>Jail Time</th>
                <th>Suspension of License</th>
                <th>Community Service/Fine</th>
                <th>Fine</th>
                <th>Misc.</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>DUI 1st</td>
                <td>Up to 6 Months</td>
                <td>90 days</td>
                <td>Victim Impact Panel</td>
                <td>Up to $1,000</td>
                <td>DUI School</td>
              </tr>
              <tr>
                <td>DUI 2nd</td>
                <td>Up to 6 months</td>
                <td>1 year suspension</td>
                <td>Yes/up to $1,000/Victim Impact Panel</td>
                <td>Up to $1,000</td>
                <td>Treatment Program</td>
              </tr>
              <tr>
                <td>DUI 3rd</td>
                <td>Up to 6 years in prison</td>
                <td>3 Year suspension</td>
                <td>Up to $5,000</td>
                <td>Breath Interlock Device</td>
              </tr>
            </tbody>
          </table>

Jade rosjun over 5 years ago

I have the same problem... left columns were collapse when using class="responsive" for table...

Gabriel Zastawnik almost 5 years ago

Hi.
In my case everything started to work smoothly when I removed those lines from responsive-tables.js:

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

Jeffrey Peck over 4 years ago

I'm having some issues with the responsive tables as well. They work mostly, but horizontal scrolling definitely doesn't work within columns that have collapsed. I tried Gabriel's fix, but didn't resolve the scrolling issue. Anyone have any other suggestions? Thanks in advance.