Menu icon Foundation
Table Stack Breakpoint

Can I use css to change the table stack breakpoint from medium to small? 

tablebreakpointtable stack

Can I use css to change the table stack breakpoint from medium to small? 

David Titherly 3 months ago

In case anyone else is wondering the same thing, I'll answer my own question. This worked for me.

The breakpoint is defined in a media query in foundation.css thus:

@media screen and (max-width: 63.9375em) {

  table.stack thead {

    display: none; }

  table.stack tfoot {

    display: none; }

  table.stack tr,

  table.stack th,

  table.stack td {

    display: block; }

  table.stack td {

    border-top: 0; } }

Obviously it is not good practice to change the original foundation.css, but it is possible to define a new media query and to give the class a new name. Mine is 

@media screen and (max-width: 39.9375em) {

  table.stack-40em thead {

    display: none; }

  table.stack-40em tfoot {

    display: none; }

  table.stack-40.em tr,

  table.stack-40em th,

  table.stack-40em td {

    display: block; }

  table.stack-40em td {

    border-top: 0; } }

Put this in the header of the page, or the local (linked) css file and use stack-40em in place of stack when defining the table class.