From d171e7b0947926c159d66bc21d93ea02aebd05ee Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Thu, 26 Feb 2026 17:24:25 +0800
Subject: [PATCH] fix: table max width

---
 content/index.md         |  2 ++
 content/npcs.csv         |  6 ++++++
 src/components/table.tsx | 36 +++++++++++++++++++-----------------
 3 files changed, 27 insertions(+), 17 deletions(-)
 create mode 100644 content/npcs.csv

diff --git a/content/index.md b/content/index.md
index 6173e41..9b1a613 100644
--- a/content/index.md
+++ b/content/index.md
@@ -22,6 +22,8 @@
 
 :md-table[./sparks.csv]{roll remix}
 
+:md-table[./npcs.csv]{roll}
+
 ### 链接
 
 文本里面可以有:md-link[./stuff.md#啊什么]的啦
diff --git a/content/npcs.csv b/content/npcs.csv
new file mode 100644
index 0000000..0334268
--- /dev/null
+++ b/content/npcs.csv
@@ -0,0 +1,6 @@
+label,body
+"Hello world","**Hello**, world"
+"Hello foo","**Hello**, foo"
+"Hello bar","**Hello**, bar"
+"Hello stuff","**Hello**, stuff"
+"Hello again","**Hello**, again"
diff --git a/src/components/table.tsx b/src/components/table.tsx
index 3b4b508..8bdca78 100644
--- a/src/components/table.tsx
+++ b/src/components/table.tsx
@@ -145,7 +145,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
   return (
     <div class="ttrpg-table">
       <div class="flex items-center gap-2 border-b border-gray-200">
-        <div class="flex flex-col w-full">
+        <div class="flex flex-col overflow-x-auto">
           {/* 分组 tabs */}
           <Show when={hasGroup()}>
             <div class="flex gap-2 border-b border-gray-100 pb-2">
@@ -176,30 +176,32 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
             </div>
           </Show>
           {/* 内容 tabs */}
-          <div class="flex gap-2">
+          <div class="flex items-center gap-2">
             <Show when={props.roll}>
               <button
                 onClick={handleRoll}
-                class="text-gray-500 hover:text-gray-700"
+                class="text-gray-500 hover:text-gray-700 flex-shrink-0"
                 title="随机切换"
               >
                 🎲
               </button>
             </Show>
-            <For each={filteredRows()}>
-              {(row, index) => (
-                <button
-                  onClick={() => setActiveTab(index())}
-                  class={`font-medium transition-colors ${
-                    activeTab() === index()
-                      ? 'text-blue-600 border-b-2 border-blue-600'
-                      : 'text-gray-500 hover:text-gray-700'
-                  }`}
-                >
-                  {row.label}
-                </button>
-              )}
-            </For>
+            <div class="flex gap-2 overflow-x-auto flex-1 min-w-0">
+              <For each={filteredRows()}>
+                {(row, index) => (
+                  <button
+                    onClick={() => setActiveTab(index())}
+                    class={`font-medium transition-colors flex-shrink-0 ${
+                      activeTab() === index()
+                        ? 'text-blue-600 border-b-2 border-blue-600'
+                        : 'text-gray-500 hover:text-gray-700'
+                    }`}
+                  >
+                    {row.label}
+                  </button>
+                )}
+              </For>
+            </div>
           </div>
         </div>
       </div>