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
- /* 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;
- }
- }