/* 表格基础样式 */ table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.95rem; box-shadow: 0 4px 10px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04); overflow: hidden; border-radius: 0.5rem; } /* 表格边框样式 */ table, th, td { border: 1px solid #e2e8f0; } /* 表头样式 */ thead { background-color: #f0f5ff; } th { padding: 1rem; font-weight: 600; text-align: left; vertical-align: middle; border-bottom: 2px solid #d6e0ff; color: #3451db; } /* 表格单元格样式 */ td { padding: 0.875rem 1rem; vertical-align: middle; color: #1e293b; position: relative; } /* 内容对齐方式 */ th[align="center"], td[align="center"] { text-align: center; } th[align="right"], td[align="right"] { text-align: right; } th[align="left"], td[align="left"] { text-align: left; } /* 表格行交替颜色 */ tbody tr:nth-child(even) { background-color: #f8fafc; } tbody tr:nth-child(odd) { background-color: #ffffff; } /* 鼠标悬停效果 */ tbody tr:hover { background-color: #f5f7ff; } /* 特定表格类型样式 */ table.feature-comparison td, .feature-table td, .function-table td, .comparison-table td { text-align: center; } table.feature-comparison td:first-child, .feature-table td:first-child, .function-table td:first-child, .comparison-table td:first-child { text-align: left; font-weight: 500; } .feature-table th, .function-table th, .comparison-table th { text-align: center; } .feature-table th:first-child, .function-table th:first-child, .comparison-table th:first-child { text-align: left; } /* 勾号和叉号样式 */ .tick, .yes, .true, .check-mark, .checkmark, .check, .✓ { display: inline-block; text-align: center; color: #059669; font-weight: bold; font-size: 1.25em; } .cross, .no, .false, .cross-mark, .crossmark, .cross-symbol, .✗ { display: inline-block; text-align: center; color: #dc2626; font-weight: bold; font-size: 1.25em; } /* 添加内容 */ .tick::before, .yes::before, .true::before { content: "✓"; } .cross::before, .no::before, .false::before { content: "✗"; } /* 状态标识符号样式 */ td:has(> :is(svg[aria-label="yes"], .yes, .tick, .true)) { color: #047857; } td:has(> :is(svg[aria-label="no"], .no, .cross, .false)) { color: #b91c1c; } /* 单个单元格居中 */ td:only-child { text-align: center; } /* 全局状态颜色 */ .text-success, .text-green, .success-mark { color: #059669 !important; font-weight: bold; } .text-danger, .text-red, .danger-mark { color: #dc2626 !important; font-weight: bold; } /* Prose 内表格样式 */ .prose table { border-collapse: collapse !important; border-radius: 0.5rem !important; overflow: hidden !important; } .prose table th, .prose table td { border: 1px solid #e2e8f0 !important; } /* 表格内行内样式覆盖 */ table[style] th, table[style] td { border: 1px solid #e2e8f0 !important; } table[style] td { vertical-align: middle; } /* 响应式表格样式 */ @media (max-width: 640px) { /* 表格容器 */ table { display: table; table-layout: fixed; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 表格包装容器 - 注意:需要在HTML中添加div.table-wrapper包围表格 */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: 1.5em 0; } /* 确保标题和内容宽度一致 */ table th, table td { min-width: 8rem; padding: 0.75rem; white-space: nowrap; } } /* 暗色模式 */ [data-theme="dark"] table { box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.3), 0 2px 6px -1px rgba(0, 0, 0, 0.2); border-color: #475569; background-color: #0f172a; border-radius: 0.5rem; overflow: hidden; } [data-theme="dark"] table, [data-theme="dark"] th, [data-theme="dark"] td { border-color: #475569; } [data-theme="dark"] table[style] th, [data-theme="dark"] table[style] td, [data-theme="dark"] .prose table th, [data-theme="dark"] .prose table td { border-color: #475569 !important; } [data-theme="dark"] thead { background-color: #1e293b; border-bottom: 2px solid #4b6bff; } [data-theme="dark"] th { border-bottom-color: #4b6bff; color: #adc2ff; background-color: transparent; font-weight: 600; letter-spacing: 0.5px; } [data-theme="dark"] th:not(:last-child) { border-right-color: #374151; } [data-theme="dark"] td { color: #e2e8f0; } [data-theme="dark"] td:not(:last-child) { border-right-color: #374151; } [data-theme="dark"] tbody tr:nth-child(even) { background-color: #1e293b; } [data-theme="dark"] tbody tr:nth-child(odd) { background-color: #111827; } [data-theme="dark"] tbody tr:hover { background-color: #272f45; box-shadow: inset 0 0 0 2px rgba(75, 107, 255, 0.3); } [data-theme="dark"] tbody tr:last-child td { border-bottom: none; } /* 暗色模式下的勾叉符号 */ [data-theme="dark"] .tick, [data-theme="dark"] .yes, [data-theme="dark"] .true, [data-theme="dark"] .check-mark, [data-theme="dark"] .checkmark, [data-theme="dark"] .check, [data-theme="dark"] .✓, [data-theme="dark"] .text-success, [data-theme="dark"] .text-green, [data-theme="dark"] .success-mark { color: #10b981 !important; text-shadow: 0 0 5px rgba(16, 185, 129, 0.3); } [data-theme="dark"] .cross, [data-theme="dark"] .no, [data-theme="dark"] .false, [data-theme="dark"] .cross-mark, [data-theme="dark"] .crossmark, [data-theme="dark"] .cross-symbol, [data-theme="dark"] .✗, [data-theme="dark"] .text-danger, [data-theme="dark"] .text-red, [data-theme="dark"] .danger-mark { color: #ef4444 !important; text-shadow: 0 0 5px rgba(239, 68, 68, 0.3); }