From d1756ce60d34349478590b266375bd5d9e51fe6b Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Wed, 30 Apr 2025 23:42:11 +0800
Subject: feat: responsive table

- allow horizontal scroll when not having enough space on X axis
- maximun width for each cell


Former-commit-id: 2db7b66b734b78cb273f6560e364d946038b85fc
---
 assets/css/components/_markdown.scss | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

(limited to 'assets/css/components/_markdown.scss')

diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss
index d1e1c50d..4378d398 100644
--- a/assets/css/components/_markdown.scss
+++ b/assets/css/components/_markdown.scss
@@ -109,17 +109,28 @@ $em-text-color: #889E73;
     background-color: rgba(255, 235, 0, .5)
   }
 
-  table {
-      border-collapse: collapse;
-      border-top: 2px solid var(--border-color);
+  .table-container {
       overflow-x: auto;
-      width: 100%;
-      tr {
-          border-bottom: 1px solid var(--border-color);
-      }
-      td, th {
-          padding: 0.5rem 1rem;
-          line-height: 1.5;
+      -webkit-overflow-scrolling: touch;
+
+      table {
+          border-collapse: collapse;
+          table-layout: fixed;
+          min-width: 100%;
+          width: max-content;
+
+          border-top: 2px solid var(--border-color);
+
+          tr {
+              border-bottom: 1px solid var(--border-color);
+          }
+          td, th {
+              max-width: 200px;
+              padding: 0.5rem 1rem;
+              line-height: 1.5;
+              white-space: normal;
+              word-wrap: break-word;
+          }
       }
   }
 
-- 
cgit v1.2.3