content/index.md

@@ -22,8 +22,6 @@
 
 :md-table[./sparks.csv]{roll remix}
 
-:md-table[./npcs.csv]{roll}
-
 ### 链接
 
 文本里面可以有:md-link[./stuff.md#啊什么]的啦

content/npcs.csv

@@ -1,6 +0,0 @@
-label,body
-"Hello world","**Hello**, world"
-"Hello foo","**Hello**, foo"
-"Hello bar","**Hello**, bar"
-"Hello stuff","**Hello**, stuff"
-"Hello again","**Hello**, again"

src/components/table.tsx

@@ -20,7 +20,6 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
   const [activeTab, setActiveTab] = createSignal(0);
   const [activeGroup, setActiveGroup] = createSignal<string | null>(null);
   const [bodyHtml, setBodyHtml] = createSignal('');
-  let tabsContainer: HTMLDivElement | undefined;
 
   // 从 element 的 textContent 获取 CSV 路径
   const src = element?.textContent?.trim() || '';
@@ -141,17 +140,12 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
   const handleRoll = () => {
     const randomIndex = Math.floor(Math.random() * filteredRows().length);
     setActiveTab(randomIndex);
-    // 滚动到可视区域
-    setTimeout(() => {
-      const activeButton = tabsContainer?.querySelector('.border-blue-600');
-      activeButton?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
-    }, 50);
   };
 
   return (
     <div class="ttrpg-table">
       <div class="flex items-center gap-2 border-b border-gray-200">
-        <div class="flex flex-col overflow-x-auto">
+        <div class="flex flex-col w-full">
           {/* 分组 tabs */}
           <Show when={hasGroup()}>
             <div class="flex gap-2 border-b border-gray-100 pb-2">
@@ -182,32 +176,30 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
             </div>
           </Show>
           {/* 内容 tabs */}
-          <div class="flex items-center gap-2">
+          <div class="flex gap-2">
             <Show when={props.roll}>
               <button
                 onClick={handleRoll}
-                class="text-gray-500 hover:text-gray-700 flex-shrink-0"
+                class="text-gray-500 hover:text-gray-700"
                 title="随机切换"
               >
                 🎲
               </button>
             </Show>
-            <div ref={tabsContainer} class="flex gap-2 overflow-x-auto flex-1 min-w-0">
+            <For each={filteredRows()}>
-              <For each={filteredRows()}>
+              {(row, index) => (
-                {(row, index) => (
+                <button
-                  <button
+                  onClick={() => setActiveTab(index())}
-                    onClick={() => setActiveTab(index())}
+                  class={`font-medium transition-colors ${
-                    class={`font-medium transition-colors flex-shrink-0 ${
+                    activeTab() === index()
-                      activeTab() === index()
+                      ? 'text-blue-600 border-b-2 border-blue-600'
-                        ? 'text-blue-600 border-b-2 border-blue-600'
+                      : 'text-gray-500 hover:text-gray-700'
-                        : 'text-gray-500 hover:text-gray-700'
+                  }`}
-                    }`}
+                >
-                  >
+                  {row.label}
-                    {row.label}
+                </button>
-                  </button>
+              )}
-                )}
+            </For>
-              </For>
-            </div>
           </div>
         </div>
       </div>