From 2b07c5cc3dc4a98e004d7c14ae49cb70d224d9b3 Mon Sep 17 00:00:00 2001
From: Giancarlo Buomprisco <giancarlopsk@gmail.com>
Date: Tue, 20 May 2025 10:58:02 +0700
Subject: [PATCH] Markdoc table style (#258)

* Add styling for tables in Markdoc content

This commit introduces consistent styles for tables in Markdoc, including adjustments for headers, footers, rows, and cells. It ensures better alignment, spacing, and visual clarity across table elements, enhancing readability and usability.
---
 apps/web/styles/markdoc.css | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/apps/web/styles/markdoc.css b/apps/web/styles/markdoc.css
index 84ed925bf..6faaa8c44 100644
--- a/apps/web/styles/markdoc.css
+++ b/apps/web/styles/markdoc.css
@@ -111,4 +111,32 @@
 
 .markdoc [role='alert'] h5 {
     color: inherit;
+}
+
+.markdoc table {
+    @apply w-full caption-bottom text-sm my-4;
+}
+
+.markdoc th {
+    @apply [&_tr]:border-b;
+}
+
+.markdoc tbody {
+    @apply [&_tr:last-child]:border-0;
+}
+
+.markdoc tfoot {
+    @apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0;
+}
+
+.markdoc tr {
+    @apply data-[state=selected]:bg-muted border-b transition-colors;
+}
+
+.markdoc th {
+    @apply text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
+}
+
+.markdoc td {
+    @apply p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
 }
\ No newline at end of file