Add display table css

Author: rossta

app/javascript/css/application.css

@@ -35,3 +35,4 @@
 @import './components/anchors.scss';
 @import './components/callout.css';
 @import './components/color-scheme.scss';
+@import './components/table.css';

app/javascript/css/components/table.css

@@ -0,0 +1,20 @@
+.table {
+  & .table-row:nth-child(odd) {
+    background-color: var(--color-slate-200);
+  }
+  & .table-row:first-child {
+    background-color: var(--joy-color-200);
+  }
+}
+
+.dark {
+  .table {
+    & .table-row:nth-child(odd) {
+      background-color: var(--color-slate-800);
+    }
+
+    & .table-row:first-child {
+      background-color: var(--joy-color-950);
+    }
+  }
+}

app/javascript/css/utilities/tailwind.css

@@ -224,6 +224,18 @@
   display: contents;
 }
 
+.table {
+  display: table;
+}
+
+.table-row {
+  display: table-row;
+}
+
+.table-cell {
+  display: table-cell;
+}
+
 .h-16 {
   height: 4rem;
 }