Mobile tables: convert to stacked card layout instead of horizontal scroll

- Tables automatically transform to vertical card layout on mobile (<768px)
- Each row becomes a card with label-value pairs
- No more horizontal scrolling needed
- Applied to guide articles, docs param tables, and pricing comparison

Author: pc-study

docs.html

@@ -81,23 +81,26 @@
 
 /* Responsive table wrapper */
 .doc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0 24px;
-  border:1px solid var(--border);border-radius:var(--r);position:relative}
-.doc-table-wrap::after{content:'← 左右滑动查看 →';display:none;position:absolute;top:-22px;right:0;
-  font-size:.7rem;color:var(--text-muted);pointer-events:none}
-.doc-table-wrap table{margin:0;border:none}
-.doc-table-wrap th:first-child,.doc-table-wrap td:first-child{position:sticky;left:0;
-  background:var(--card);z-index:1}
+  border-radius:var(--r);position:relative}
+.doc-table-wrap table{margin:0}
 
 @media(max-width:768px){
   .doc-layout{grid-template-columns:1fr;gap:20px}
   .doc-sidebar{position:static;display:flex;flex-wrap:wrap;gap:4px}
   .doc-sidebar a{border-left:none;border-bottom:2px solid var(--border);padding:6px 12px}
   .doc-sidebar .sb-title{display:none}
-  .doc-table-wrap::after{display:block}
-  .doc-content .param-table,.doc-content .media-table{font-size:.78rem}
-  .doc-content .param-table th,.doc-content .param-table td,
-  .doc-content .media-table th,.doc-content .media-table td{padding:7px 10px}
-  .doc-content .param-table td:first-child{white-space:normal;word-break:break-all}
+
+  .doc-content table.resp-cards{border:none}
+  .doc-content table.resp-cards thead{display:none}
+  .doc-content table.resp-cards tr{display:block;margin-bottom:12px;border:1px solid var(--border);
+    border-radius:var(--r);overflow:hidden;background:var(--card)}
+  .doc-content table.resp-cards td{display:flex;justify-content:space-between;align-items:flex-start;
+    gap:10px;padding:8px 12px;border:none;border-bottom:1px solid var(--border);font-size:.82rem}
+  .doc-content table.resp-cards td:last-child{border-bottom:none}
+  .doc-content table.resp-cards td::before{content:attr(data-label);font-weight:700;color:var(--text);
+    flex-shrink:0;min-width:30%;font-size:.78rem}
+  .doc-content table.resp-cards td:first-child{background:var(--bg3);font-family:var(--mono);
+    color:var(--accent2);font-size:.8rem}
 }
 </style>
 <script type="application/ld+json">

guides/guide.css

@@ -26,12 +26,6 @@
 .guide-body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.85rem}
 .guide-body th,.guide-body td{border:1px solid var(--border);padding:10px 14px;text-align:left}
 .guide-body th{background:var(--bg3);color:var(--text);font-weight:600}
-/* Responsive table wrapper (added by JS) */
-.guide-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0;
-  border-radius:var(--r);position:relative}
-.guide-table-wrap table{margin:0}
-.guide-table-wrap::after{content:'← 左右滑动查看 →';display:none;position:absolute;top:-20px;right:0;
-  font-size:.7rem;color:var(--text-muted);pointer-events:none}
 .guide-body a{color:var(--red);text-decoration:none}
 .guide-body a:hover{text-decoration:underline}
 .guide-body ul,.guide-body ol{padding-left:24px;margin:0 0 1em}
@@ -56,14 +50,23 @@
   transition:color .2s}
 .mac-term-expand:hover{color:var(--red)}
 
+/* Mobile: table → stacked card layout */
 @media(max-width:768px){
   .guide-article{padding:70px 0 40px}
   .guide-body{font-size:.86rem}
   .guide-body pre{font-size:.78rem;padding:12px}
-  .guide-body table{font-size:.78rem}
-  .guide-body th,.guide-body td{padding:7px 8px}
-  .guide-table-wrap::after{display:block}
-  .guide-table-wrap td:first-child{position:sticky;left:0;background:var(--bg2);z-index:1}
+
+  .guide-body table.resp-cards{border:none}
+  .guide-body table.resp-cards thead{display:none}
+  .guide-body table.resp-cards tr{display:block;margin-bottom:12px;border:1px solid var(--border);
+    border-radius:var(--r);overflow:hidden;background:var(--card)}
+  .guide-body table.resp-cards td{display:flex;justify-content:space-between;align-items:flex-start;
+    gap:10px;padding:8px 12px;border:none;border-bottom:1px solid var(--border);font-size:.82rem}
+  .guide-body table.resp-cards td:last-child{border-bottom:none}
+  .guide-body table.resp-cards td::before{content:attr(data-label);font-weight:700;color:var(--text);
+    flex-shrink:0;min-width:35%;font-size:.78rem}
+  .guide-body table.resp-cards td:only-child::before{display:none}
+
   .guide-cta{padding:20px 16px!important}
   .guide-cta div:last-child{flex-direction:column}
   .guide-cta a{justify-content:center}

js/shared.js

@@ -220,13 +220,18 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
-  // Auto-wrap tables in scrollable containers (guides + docs)
-  document.querySelectorAll('.guide-body table, .doc-content .param-table, .doc-content .media-table').forEach(table => {
-    if (table.closest('.guide-table-wrap') || table.closest('.doc-table-wrap') || table.closest('.cmp-wrap')) return;
-    const wrapper = document.createElement('div');
-    wrapper.className = table.closest('.guide-body') ? 'guide-table-wrap' : 'doc-table-wrap';
-    table.parentNode.insertBefore(wrapper, table);
-    wrapper.appendChild(table);
+  // Responsive table cards: add data-label to td, add resp-cards class
+  document.querySelectorAll('.guide-body table, .doc-content .param-table, .doc-content .media-table, .cmp-table').forEach(table => {
+    const headers = [];
+    table.querySelectorAll('thead th').forEach(th => headers.push(th.textContent.trim()));
+    if (headers.length < 2) return;
+    table.querySelectorAll('tbody tr').forEach(tr => {
+      if (tr.classList.contains('cmp-cat')) return;
+      tr.querySelectorAll('td').forEach((td, i) => {
+        if (headers[i]) td.setAttribute('data-label', headers[i]);
+      });
+    });
+    table.classList.add('resp-cards');
   });
 
   // Docs scroll spy

pricing.html

@@ -59,7 +59,7 @@
 /* COMPARISON TABLE */
 .pr-compare{padding:50px 0 40px}
 .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
-.cmp-table{width:100%;border-collapse:separate;border-spacing:0;min-width:680px}
+.cmp-table{width:100%;border-collapse:separate;border-spacing:0}
 .cmp-table th,.cmp-table td{padding:14px 18px;text-align:left;font-size:.85rem;border-bottom:1px solid var(--border)}
 .cmp-table thead th{background:var(--bg3);color:var(--text);font-weight:700;position:sticky;top:0;z-index:1}
 .cmp-table thead th:first-child{border-radius:var(--r) 0 0 0}
@@ -113,11 +113,20 @@
 
 @media(max-width:768px){
   .plans-grid{grid-template-columns:1fr}
-  .cmp-table{min-width:480px}
-  .cmp-table th,.cmp-table td{padding:10px 12px;font-size:.78rem}
-  .cmp-table thead th{position:sticky;left:0}
-  .cmp-table tbody td:first-child{position:sticky;left:0;background:var(--bg2);z-index:1;font-weight:600}
-  .cmp-hint{display:block}
+  .cmp-wrap{overflow:visible}
+  .cmp-table.resp-cards{border-spacing:0}
+  .cmp-table.resp-cards thead{display:none}
+  .cmp-table.resp-cards .cmp-cat{display:none}
+  .cmp-table.resp-cards tr{display:block;margin-bottom:12px;border:1px solid var(--border);
+    border-radius:var(--r);overflow:hidden;background:var(--card)}
+  .cmp-table.resp-cards td{display:flex;justify-content:space-between;align-items:center;
+    padding:10px 14px;border-bottom:1px solid var(--border);font-size:.84rem}
+  .cmp-table.resp-cards td:last-child{border-bottom:none}
+  .cmp-table.resp-cards td::before{content:attr(data-label);font-weight:600;color:var(--text);
+    flex-shrink:0;font-size:.82rem}
+  .cmp-table.resp-cards td:first-child{background:var(--bg3);font-weight:700;color:var(--text)}
+  .cmp-table.resp-cards td:first-child::before{display:none}
+  .cmp-hint{display:none}
   .pr-cta-box{padding:36px 24px}
 }
 </style>