Merge pull request #121 from cmanon/feature/120-table-styling

Add class name selector to responsive tables
This commit is contained in:
Justin Foell
2022-04-29 14:22:41 -05:00
committed by GitHub
+4 -4
View File
@@ -40,18 +40,18 @@ only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) { (min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */ /* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr { .activity-details-table table, thead, tbody, th, td, tr {
display: block; display: block;
} }
/* Hide table headers (but not display: none;, for accessibility) */ /* Hide table headers (but not display: none;, for accessibility) */
thead tr { .activity-details-table thead tr {
position: absolute; position: absolute;
top: -9999px; top: -9999px;
left: -9999px; left: -9999px;
} }
td { .activity-details-table td {
/* Behave like a "row" */ /* Behave like a "row" */
border: none; border: none;
border-bottom: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7;
@@ -59,7 +59,7 @@ only screen and (max-width: 760px),
padding-left: 50%; padding-left: 50%;
} }
td:before { .activity-details-table td:before {
/* Now like a table header */ /* Now like a table header */
position: absolute; position: absolute;
/* Top/left values mimic padding */ /* Top/left values mimic padding */