/* 表格基础样式 */ 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; } /* 响应式表格 */ @media (max-width: 640px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } th, td { white-space: nowrap; padding: 0.75rem 1rem; } } /* 特定针对于内联样式的表格 */ table[style] th, table[style] td { border: 1px solid #e2e8f0 !important; } /* 处理嵌套样式的情况 */ .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; } /* 勾号和叉号样式 - 通用方式 */ .tick, .yes, .true { display: inline-block; text-align: center; color: #059669; font-weight: bold; font-size: 1.25em; } .cross, .no, .false { 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: "✗"; } /* 直接使用✓或✗的样式 */ .check-mark { color: #059669; font-weight: bold; font-size: 1.25em; text-align: center; } .cross-mark { color: #dc2626; font-weight: bold; font-size: 1.25em; text-align: center; } /* 状态标识符号样式 */ 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; } /* 检查整个表格的样式 */ table.feature-comparison td { text-align: center; } table.feature-comparison td:first-child { text-align: left; } /* 添加全局样式识别 */ .text-success, .text-green, .success-mark { color: #059669 !important; font-weight: bold; } .text-danger, .text-red, .danger-mark { color: #dc2626 !important; font-weight: bold; } /* 直接针对表格中的✓和✗符号 - 移除不兼容的:contains选择器 */ /* 改用更通用的选择器和类 */ /* 针对行内样式的表格 */ table[style] td { vertical-align: middle; } /* 使用属性选择器 */ td[align="center"] { text-align: center; } /* 为常见的功能对比表格添加专用样式 */ .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; } .feature-table td, .function-table td, .comparison-table td { text-align: center; } .feature-table td:first-child, .function-table td:first-child, .comparison-table td:first-child { text-align: left; font-weight: 500; } /* 直接样式化 ✓ 和 ✗ 字符 */ .checkmark, .check, .✓ { color: #059669; font-weight: bold; font-size: 1.25em; } .crossmark, .cross-symbol, .✗ { color: #dc2626; font-weight: bold; font-size: 1.25em; } /* 暗色模式 - 只使用 [data-theme="dark"] 选择器 */ [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; } table, th, td { border-color: #475569; } table[style] th, table[style] td, .prose table th, .prose table td { border-color: #475569 !important; } thead { background-color: #1a2e6a; border-bottom: 2px solid #4b6bff; } th { border-bottom-color: #4b6bff; color: #adc2ff; background-color: transparent; font-weight: 600; letter-spacing: 0.5px; } th:not(:last-child) { border-right-color: #374151; } td { color: #e2e8f0; } td:not(:last-child) { border-right-color: #374151; } tbody tr:nth-child(even) { background-color: #1e293b; } tbody tr:nth-child(odd) { background-color: #111827; } tbody tr:hover { background-color: #272f45; box-shadow: inset 0 0 0 2px rgba(75, 107, 255, 0.3); } tbody tr:last-child td { border-bottom: none; } /* 表格圆角样式在暗色模式下的处理 */ table { border-radius: 0.5rem; overflow: hidden; } /* 勾号和叉号颜色调整 */ .tick, .yes, .true, .check-mark { color: #10b981; text-shadow: 0 0 5px rgba(16, 185, 129, 0.3); } .cross, .no, .false, .cross-mark { color: #ef4444; text-shadow: 0 0 5px rgba(239, 68, 68, 0.3); } .text-success, .text-green, .success-mark { color: #10b981 !important; text-shadow: 0 0 5px rgba(16, 185, 129, 0.3); } .text-danger, .text-red, .danger-mark { color: #ef4444 !important; text-shadow: 0 0 5px rgba(239, 68, 68, 0.3); } .checkmark, .check, .✓ { color: #10b981; text-shadow: 0 0 5px rgba(16, 185, 129, 0.3); } .crossmark, .cross-symbol, .✗ { color: #ef4444; text-shadow: 0 0 5px rgba(239, 68, 68, 0.3); } }/* 表格基础样式 */ 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; } /* 响应式表格 */ @media (max-width: 640px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } th, td { white-space: nowrap; padding: 0.75rem 1rem; } } /* 特定针对于内联样式的表格 */ table[style] th, table[style] td { border: 1px solid #e2e8f0 !important; } /* 处理嵌套样式的情况 */ .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; } /* 勾号和叉号样式 - 通用方式 */ .tick, .yes, .true { display: inline-block; text-align: center; color: #059669; font-weight: bold; font-size: 1.25em; } .cross, .no, .false { 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: "✗"; } /* 直接使用✓或✗的样式 */ .check-mark { color: #059669; font-weight: bold; font-size: 1.25em; text-align: center; } .cross-mark { color: #dc2626; font-weight: bold; font-size: 1.25em; text-align: center; } /* 状态标识符号样式 */ 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; } /* 检查整个表格的样式 */ table.feature-comparison td { text-align: center; } table.feature-comparison td:first-child { text-align: left; } /* 添加全局样式识别 */ .text-success, .text-green, .success-mark { color: #059669 !important; font-weight: bold; } .text-danger, .text-red, .danger-mark { color: #dc2626 !important; font-weight: bold; } /* 直接针对表格中的✓和✗符号 - 移除不兼容的:contains选择器 */ /* 改用更通用的选择器和类 */ /* 针对行内样式的表格 */ table[style] td { vertical-align: middle; } /* 使用属性选择器 */ td[align="center"] { text-align: center; } /* 为常见的功能对比表格添加专用样式 */ .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; } .feature-table td, .function-table td, .comparison-table td { text-align: center; } .feature-table td:first-child, .function-table td:first-child, .comparison-table td:first-child { text-align: left; font-weight: 500; } /* 直接样式化 ✓ 和 ✗ 字符 */ .checkmark, .check, .✓ { color: #059669; font-weight: bold; font-size: 1.25em; } .crossmark, .cross-symbol, .✗ { color: #dc2626; font-weight: bold; font-size: 1.25em; } /* 暗色模式 - 只使用 [data-theme="dark"] 选择器 */ [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; } table, th, td { border-color: #475569; } table[style] th, table[style] td, .prose table th, .prose table td { border-color: #475569 !important; } thead { background-color: #1e293b; border-bottom: 2px solid #4b6bff; } th { border-bottom-color: #4b6bff; color: #adc2ff; background-color: transparent; font-weight: 600; letter-spacing: 0.5px; } th:not(:last-child) { border-right-color: #374151; } td { color: #e2e8f0; } td:not(:last-child) { border-right-color: #374151; } tbody tr:nth-child(even) { background-color: #1e293b; } tbody tr:nth-child(odd) { background-color: #111827; } tbody tr:hover { background-color: #272f45; box-shadow: inset 0 0 0 2px rgba(75, 107, 255, 0.3); } tbody tr:last-child td { border-bottom: none; } /* 表格圆角样式在暗色模式下的处理 */ table { border-radius: 0.5rem; overflow: hidden; } /* 勾号和叉号颜色调整 */ .tick, .yes, .true, .check-mark { color: #10b981; text-shadow: 0 0 5px rgba(16, 185, 129, 0.3); } .cross, .no, .false, .cross-mark { color: #ef4444; text-shadow: 0 0 5px rgba(239, 68, 68, 0.3); } .text-success, .text-green, .success-mark { color: #10b981 !important; text-shadow: 0 0 5px rgba(16, 185, 129, 0.3); } .text-danger, .text-red, .danger-mark { color: #ef4444 !important; text-shadow: 0 0 5px rgba(239, 68, 68, 0.3); } .checkmark, .check, .✓ { color: #10b981; text-shadow: 0 0 5px rgba(16, 185, 129, 0.3); } .crossmark, .cross-symbol, .✗ { color: #ef4444; text-shadow: 0 0 5px rgba(239, 68, 68, 0.3); } }