Optimize the visual presentation of tables

Author: zstar1003

src/components/Preview.css

@@ -1487,3 +1487,127 @@ img[data-clickable-image="true"]:hover {
 .hljs {
   background: transparent !important;
 }
+
+/* Table styles */
+.desktop-preview table,
+.phone-content table,
+.card-preview-card table {
+  border-collapse: separate;
+  border-spacing: 0;
+  overflow: hidden;
+}
+
+/* Table header */
+.desktop-preview th,
+.phone-content th,
+.card-preview-card th {
+  position: relative;
+  transition: background 0.2s ease;
+}
+
+/* Table row hover effect - 简约淡雅 */
+.desktop-preview tbody tr,
+.phone-content tbody tr,
+.card-preview-card tbody tr {
+  transition: background-color 0.2s ease;
+}
+
+.desktop-preview tbody tr:hover,
+.phone-content tbody tr:hover,
+.card-preview-card tbody tr:hover {
+  background-color: #f8fafc !important;
+}
+
+.desktop-preview tbody tr:hover td,
+.phone-content tbody tr:hover td,
+.card-preview-card tbody tr:hover td {
+  background-color: #f8fafc !important;
+}
+
+/* Striped rows - 极淡的蓝色 */
+.desktop-preview tbody tr:nth-child(even) td,
+.phone-content tbody tr:nth-child(even) td,
+.card-preview-card tbody tr:nth-child(even) td {
+  background-color: #f8fafc !important;
+}
+
+.desktop-preview tbody tr:nth-child(odd) td,
+.phone-content tbody tr:nth-child(odd) td,
+.card-preview-card tbody tr:nth-child(odd) td {
+  background-color: #ffffff !important;
+}
+
+/* Remove border from last row */
+.desktop-preview tbody tr:last-child td,
+.phone-content tbody tr:last-child td,
+.card-preview-card tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* First and last cell border radius */
+.desktop-preview thead tr:first-child th:first-child,
+.phone-content thead tr:first-child th:first-child,
+.card-preview-card thead tr:first-child th:first-child {
+  border-top-left-radius: 6px;
+}
+
+.desktop-preview thead tr:first-child th:last-child,
+.phone-content thead tr:first-child th:last-child,
+.card-preview-card thead tr:first-child th:last-child {
+  border-top-right-radius: 6px;
+}
+
+.desktop-preview tbody tr:last-child td:first-child,
+.phone-content tbody tr:last-child td:first-child,
+.card-preview-card tbody tr:last-child td:first-child {
+  border-bottom-left-radius: 6px;
+}
+
+.desktop-preview tbody tr:last-child td:last-child,
+.phone-content tbody tr:last-child td:last-child,
+.card-preview-card tbody tr:last-child td:last-child {
+  border-bottom-right-radius: 6px;
+}
+
+/* Dark theme table styles - 低调深蓝 */
+.preview-panel:not(.light) .desktop-preview table,
+.preview-panel:not(.light) .phone-content table {
+  border-color: #334155;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.preview-panel:not(.light) .desktop-preview th,
+.preview-panel:not(.light) .phone-content th {
+  background: #1e293b !important;
+  color: #cbd5e1 !important;
+  border-bottom-color: #334155 !important;
+}
+
+.preview-panel:not(.light) .desktop-preview td,
+.preview-panel:not(.light) .phone-content td {
+  color: #cbd5e1 !important;
+  border-bottom-color: #334155 !important;
+}
+
+.preview-panel:not(.light) .desktop-preview tbody tr:nth-child(even) td,
+.preview-panel:not(.light) .phone-content tbody tr:nth-child(even) td {
+  background-color: #1e293b !important;
+}
+
+.preview-panel:not(.light) .desktop-preview tbody tr:nth-child(odd) td,
+.preview-panel:not(.light) .phone-content tbody tr:nth-child(odd) td {
+  background-color: #0f172a !important;
+}
+
+.preview-panel:not(.light) .desktop-preview tbody tr:hover,
+.preview-panel:not(.light) .phone-content tbody tr:hover {
+  background-color: #1e293b !important;
+}
+
+.preview-panel:not(.light) .desktop-preview tbody tr:hover td,
+.preview-panel:not(.light) .phone-content tbody tr:hover td {
+  background-color: #1e293b !important;
+}
+
+
+

src/components/Preview.tsx

@@ -55,9 +55,9 @@ const defaultStyles = {
   li: 'margin-bottom: 8px; margin-top: 4px; line-height: 1.8;',
   a: 'color: #576b95; text-decoration: none;',
   img: 'max-width: 100%; height: auto; border-radius: 8px; margin: 14px auto; display: block; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);',
-  table: 'border-collapse: collapse; width: 100%; margin-bottom: 14px; font-size: 14px;',
-  th: 'border: 1px solid #e0e0e0; padding: 6px 10px; text-align: left; color: #333; background: #f5f5f5; font-weight: 600;',
-  td: 'border: 1px solid #e0e0e0; padding: 6px 10px; text-align: left; color: #333;',
+  table: 'border-collapse: separate; border-spacing: 0; width: 100%; margin: 20px 0; font-size: 14px; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(59, 130, 246, 0.05); border: 1px solid #e0f2fe;',
+  th: 'border-bottom: 1px solid #bfdbfe; padding: 10px 14px; text-align: left; color: #475569; background: #f8fafc; font-weight: 600; font-size: 13px;',
+  td: 'border-bottom: 1px solid #f1f5f9; padding: 9px 14px; text-align: left; color: #334155; background: #ffffff;',
   hr: 'border: none; border-top: 1px solid #e0e0e0; margin: 20px 0;',
   strong: 'font-weight: bold; display: inline; margin: 0; padding: 0; color: #1890ff;',
   em: 'font-style: italic; display: inline; margin: 0; padding: 0;'