From 8ed9786791e735094edb1f3e3f555ec9afee0d14 Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Mon, 2 Dec 2024 13:38:37 +0900
Subject: [PATCH] tiny adjustment

---
 docs/components/content.md  |  7 ++++---
 lib/components/SContent.vue | 29 +++++++++++++++++------------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/docs/components/content.md b/docs/components/content.md
index e4b8cb9a..9cc05b54 100644
--- a/docs/components/content.md
+++ b/docs/components/content.md
@@ -48,14 +48,15 @@ Place HTML elements inside `<SContent>` component and it will apply basic styles
 
 The supported elements are:
 
-- `<h1>` <Badge text="3.11.0" />
-- `<h2>` <Badge text="3.11.0" />
+- `<h1>`
+- `<h2>`
+- `<h3>`
 - `<p>`
 - `<strong>`
 - `<a>`
 - `<ul>`
 - `<ol>`
-- `<li>`
+- `<table>`
 
 ### Use CSS class to style the headings
 
diff --git a/lib/components/SContent.vue b/lib/components/SContent.vue
index b3691665..dda17ea3 100644
--- a/lib/components/SContent.vue
+++ b/lib/components/SContent.vue
@@ -112,24 +112,33 @@
 }
 
 .SContent :deep(table) {
-  box-shadow: 0 0 0 1px var(--c-divider);
-  overflow: clip;
-  margin: 4px 0;
+  margin: 8px 0;
   border-style: hidden;
   border-radius: 6px;
+  text-align: left;
   font-size: 14px;
   color: var(--c-text-1);
-  text-align: left;
+  overflow: clip;
+  box-shadow: 0 0 0 1px var(--c-divider);
+}
+
+.SContent :deep(table tr:hover td) {
+  background-color: var(--c-bg-elv-4);
+}
+
+.SContent :deep(table thead > tr > th) {
+  vertical-align: middle;
 }
 
 .SContent :deep(table th),
 .SContent :deep(table td) {
-  overflow-wrap: break-word;
-  height: 40px;
-  padding: 8px 16px;
-  background-color: var(--c-bg-elv-3);
   border: 1px solid var(--c-gutter);
+  padding: 8px 16px;
+  height: 40px;
+  vertical-align: top;
   text-wrap: pretty;
+  background-color: var(--c-bg-elv-3);
+  overflow-wrap: break-word;
 }
 
 .SContent :deep(table th) {
@@ -138,8 +147,4 @@
   color: var(--c-text-2);
   text-wrap: balance;
 }
-
-.SContent :deep(table tr:hover td) {
-  background-color: var(--c-bg-elv-4);
-}
 </style>