tablesaw.stackonly-responsive.css in Responsive Tables Filter 7
/*! Tablesaw - v3.1.2 - 2019-03-19
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2019 Filament Group; Licensed MIT */
.tablesaw {
width: 100%;
max-width: 100%;
empty-cells: show;
border-collapse: collapse;
border: 0;
padding: 0;
}
.tablesaw * {
box-sizing: border-box;
}
.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
display: none;
}
/* Mobile first styles: Begin with the stacked presentation at narrow widths */
/* Support note IE9+: @media only all */
@media only all {
/* Show the table cells as a block level element */
.tablesaw-stack {
clear: both;
}
.tablesaw-stack td,
.tablesaw-stack th {
text-align: left;
display: block;
}
.tablesaw-stack tr {
clear: both;
display: table-row;
}
/* Make the label elements a percentage width */
.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
display: inline-block;
padding: 0 .6em 0 0;
width: 30%;
}
/* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
.tablesaw-stack th .tablesaw-cell-label-top,
.tablesaw-stack td .tablesaw-cell-label-top {
display: block;
padding: .4em 0;
margin: .4em 0;
}
.tablesaw-cell-label {
display: block;
}
/* Avoid double strokes when stacked */
.tablesaw-stack tbody th.group {
margin-top: -1px;
}
/* Avoid double strokes when stacked */
.tablesaw-stack th.group b.tablesaw-cell-label {
display: none !important;
}
}
@media (max-width: 39.9375em) {
/* Table rows have a gray bottom stroke by default */
.tablesaw-stack tbody tr {
display: block;
width: 100%;
border-bottom: 1px solid #dfdfdf;
}
.tablesaw-stack thead td,
.tablesaw-stack thead th {
display: none;
}
.tablesaw-stack tbody td,
.tablesaw-stack tbody th {
display: block;
float: left;
clear: left;
width: 100%;
}
.tablesaw-cell-label {
vertical-align: top;
}
.tablesaw-cell-content {
display: inline-block;
max-width: 67%;
}
.tablesaw-stack .tablesaw-stack-block .tablesaw-cell-label,
.tablesaw-stack .tablesaw-stack-block .tablesaw-cell-content {
display: block;
width: 100%;
max-width: 100%;
padding: 0;
}
.tablesaw-stack td:empty,
.tablesaw-stack th:empty {
display: none;
}
}
/* Media query to show as a standard table at 560px (35em x 16px) or wider */
@media (min-width: 40em) {
.tablesaw-stack tr {
display: table-row;
}
/* Show the table header rows */
.tablesaw-stack td,
.tablesaw-stack th,
.tablesaw-stack thead td,
.tablesaw-stack thead th {
display: table-cell;
margin: 0;
}
/* Hide the labels in each cell */
.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
display: none !important;
}
}
File
tablesaw/css/tablesaw.stackonly-responsive.css
View source
- /*! Tablesaw - v3.1.2 - 2019-03-19
- * https://github.com/filamentgroup/tablesaw
- * Copyright (c) 2019 Filament Group; Licensed MIT */
-
- .tablesaw {
- width: 100%;
- max-width: 100%;
- empty-cells: show;
- border-collapse: collapse;
- border: 0;
- padding: 0;
- }
-
- .tablesaw * {
- box-sizing: border-box;
- }
-
- .tablesaw-stack td .tablesaw-cell-label,
- .tablesaw-stack th .tablesaw-cell-label {
- display: none;
- }
-
- /* Mobile first styles: Begin with the stacked presentation at narrow widths */
-
- /* Support note IE9+: @media only all */
-
- @media only all {
- /* Show the table cells as a block level element */
-
- .tablesaw-stack {
- clear: both;
- }
-
- .tablesaw-stack td,
- .tablesaw-stack th {
- text-align: left;
- display: block;
- }
-
- .tablesaw-stack tr {
- clear: both;
- display: table-row;
- }
-
- /* Make the label elements a percentage width */
-
- .tablesaw-stack td .tablesaw-cell-label,
- .tablesaw-stack th .tablesaw-cell-label {
- display: inline-block;
- padding: 0 .6em 0 0;
- width: 30%;
- }
-
- /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
-
- .tablesaw-stack th .tablesaw-cell-label-top,
- .tablesaw-stack td .tablesaw-cell-label-top {
- display: block;
- padding: .4em 0;
- margin: .4em 0;
- }
-
- .tablesaw-cell-label {
- display: block;
- }
-
- /* Avoid double strokes when stacked */
-
- .tablesaw-stack tbody th.group {
- margin-top: -1px;
- }
-
- /* Avoid double strokes when stacked */
-
- .tablesaw-stack th.group b.tablesaw-cell-label {
- display: none !important;
- }
- }
-
- @media (max-width: 39.9375em) {
- /* Table rows have a gray bottom stroke by default */
-
- .tablesaw-stack tbody tr {
- display: block;
- width: 100%;
- border-bottom: 1px solid #dfdfdf;
- }
-
- .tablesaw-stack thead td,
- .tablesaw-stack thead th {
- display: none;
- }
-
- .tablesaw-stack tbody td,
- .tablesaw-stack tbody th {
- display: block;
- float: left;
- clear: left;
- width: 100%;
- }
-
- .tablesaw-cell-label {
- vertical-align: top;
- }
-
- .tablesaw-cell-content {
- display: inline-block;
- max-width: 67%;
- }
-
- .tablesaw-stack .tablesaw-stack-block .tablesaw-cell-label,
- .tablesaw-stack .tablesaw-stack-block .tablesaw-cell-content {
- display: block;
- width: 100%;
- max-width: 100%;
- padding: 0;
- }
-
- .tablesaw-stack td:empty,
- .tablesaw-stack th:empty {
- display: none;
- }
- }
-
- /* Media query to show as a standard table at 560px (35em x 16px) or wider */
-
- @media (min-width: 40em) {
- .tablesaw-stack tr {
- display: table-row;
- }
-
- /* Show the table header rows */
-
- .tablesaw-stack td,
- .tablesaw-stack th,
- .tablesaw-stack thead td,
- .tablesaw-stack thead th {
- display: table-cell;
- margin: 0;
- }
-
- /* Hide the labels in each cell */
-
- .tablesaw-stack td .tablesaw-cell-label,
- .tablesaw-stack th .tablesaw-cell-label {
- display: none !important;
- }
- }