You are here

customizations.css in Responsive Tables Filter 8

/* The original Tablesaw library sets thead elements
 to display: none; in mobile contexts. This is not screen
 reader accessible. This change uses the Bootstrap framework's
 approach to make them screen-reader only visible */
@media screen and (max-width: 39.9375em) {
  .tablesaw-stack thead td,
  .tablesaw-stack thead th {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    display: block;
  }
}

File

css/customizations.css
View source
  1. /* The original Tablesaw library sets thead elements
  2. to display: none; in mobile contexts. This is not screen
  3. reader accessible. This change uses the Bootstrap framework's
  4. approach to make them screen-reader only visible */
  5. @media screen and (max-width: 39.9375em) {
  6. .tablesaw-stack thead td,
  7. .tablesaw-stack thead th {
  8. position: absolute !important;
  9. width: 1px !important;
  10. height: 1px !important;
  11. padding: 0 !important;
  12. margin: -1px !important;
  13. overflow: hidden !important;
  14. clip: rect(0, 0, 0, 0) !important;
  15. white-space: nowrap !important;
  16. border: 0 !important;
  17. display: block;
  18. }
  19. }