Add CSS for responsive tables

marketempower · Jul 13, 2020 · f93fbe3 · f93fbe3
1 parent c006443
commit f93fbe3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/cdata.css b/src/cdata.css
@@ -102,6 +102,8 @@
   & .link:visited,
   & > table a:link,
   & > table a:visited,
+  & > .table-responsive > table a:link,
+  & > .table-responsive > table a:visited,
   & > .footnotes a:link,
   & > .footnotes a:visited {
     color: #007bff;
@@ -116,6 +118,7 @@
   & > figure figcaption a:hover,
   & .link:hover,
   & > table a:hover,
+  & > .table-responsive > table a:hover,
   & > .footnotes a:hover {
     @apply underline;
     color: #0056b3;
@@ -174,8 +177,9 @@
   }
 
   /* <table> */
-  & > table {
-    @apply w-full border-collapse;
+  & > table,
+  & > .table-responsive > table {
+    @apply w-full max-w-full;
 
     & th {
       @apply font-semibold;

diff --git a/src/tools.css b/src/tools.css
@@ -10,3 +10,13 @@
   content: "";
   background-color: rgba(0,0,0,0);
 }
+
+.table-responsive {
+  @apply block w-full overflow-x-auto scrolling-touch;
+
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    @apply hidden;
+  }
+}