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 11 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.