From 992194bdb793ca7a98563aee23ea452a71330d13 Mon Sep 17 00:00:00 2001
From: Oscar Najera <hi@oscarnajera.com>
Date: Fri, 2 May 2025 19:54:37 +0200
Subject: CSS for tables

---
 assets/css/input.css    | 19 +++++++++++++++++++
 assets/css/tailwind.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+)

diff --git a/assets/css/input.css b/assets/css/input.css
index 9f03d8d..102ccd1 100644
--- a/assets/css/input.css
+++ b/assets/css/input.css
@@ -165,6 +165,25 @@
     }
   }
 
+  /* Tables */
+  .table-caption:has(+ table) {
+    @apply text-center block;
+  }
+
+  table:not(.u-legend) {
+    @apply w-full whitespace-nowrap py-2 border-b border-gray-500;
+    thead {
+      @apply bg-lime-100;
+    }
+    tbody tr {
+      @apply even:bg-gray-50;
+    }
+    th,
+    td {
+      @apply px-3 py-2;
+    }
+  }
+
   /* https://lubna.dev/articles/create-css-only-image-gallery/ */
   .gallery {
     --max-img-width: 72rem;
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index fbae38f..bbe27cb 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -971,6 +971,41 @@ h6 {
   }
 }
 
+/* Tables */
+
+.table-caption:has(+ table) {
+  display: block;
+  text-align: center;
+}
+
+table:not(.u-legend) {
+  width: 100%;
+  white-space: nowrap;
+  border-bottom-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  thead {
+    --tw-bg-opacity: 1;
+    background-color: rgb(236 252 203 / var(--tw-bg-opacity, 1));
+  }
+  tbody tr:nth-child(even) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+  }
+  th,
+    td {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+  th,
+    td {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+}
+
 /* https://lubna.dev/articles/create-css-only-image-gallery/ */
 
 .gallery {
@@ -1119,6 +1154,18 @@ h6 {
   display: flex;
 }
 
+.table {
+  display: table;
+}
+
+.table-caption {
+  display: table-caption;
+}
+
+.grid {
+  display: grid;
+}
+
 .contents {
   display: contents;
 }
-- 
cgit v1.2.3