Menu icon Foundation
reactive tables

hello awesome friends,

how do i get reactive tables? I am trying to figure out a solution to make the table on my main page www.new.omegadesignla.com to no scroll right/left but fit on the mobile device completely. I don't like how the table makes it scroll left/right any geniuses know a good fix? Thanks!

tables

hello awesome friends,

how do i get reactive tables? I am trying to figure out a solution to make the table on my main page www.new.omegadesignla.com to no scroll right/left but fit on the mobile device completely. I don't like how the table makes it scroll left/right any geniuses know a good fix? Thanks!

Donn Hill almost 5 years ago

The column before the table

<div class="large-2 medium-3 small-3 columns">
          <p>Online Registration links:<br>
            <a href="http://apexregistration.emsofl.com ">OFL Apex </a><br>
            <a href="http://apexregistration.ofy.org ">OFY Apex </a><br>
            <a href="http://apexregistration.pathwaysedu.org ">PIE-Illinois</a><br>
            <a href="http://apexregistration-tn.pathwaysedu.org ">PIE-Tennessee</a>


          </p>
        </div>

small-3 needs to change to small-12 and then it all works fine

Ryan Hellerud almost 5 years ago

Hi Don, I tried this but it did not seem to work.

Ross Brooks almost 5 years ago

Hi, Ryan. I ran into this before where default styling for the table was causing the issue. While not ideal, I was able to solve by adding styling inside a mobile media query in the appropriate stylesheet. Set the table width to 100% inside the media query.

@media only screen and (max-width: 40em) {
   table#yourTable {
        width: 100%;
   }
}

However, looking at your site, I do agree with the previous comment. If you add a small-12 to your parent div before the panel (currently its large-12 only) the table would be nested & should display correctly.