/* 表格样式组件 */ /* 通用表格样式 */ .message-content table, .markdown-content table, .bot .message-content table { width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; margin: 1em 0 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important; border-radius: 4px !important; overflow: hidden !important; /* 确保圆角边框生效 */ display: table !important; /* 强制表格显示为表格,而不是块 */ height: auto !important; /* 高度自适应内容 */ max-height: none !important; /* 不限制最大高度 */ } /* 表格单元格通用样式 */ .message-content table th, .message-content table td, .markdown-content table th, .markdown-content table td, .bot .message-content table th, .bot .message-content table td { padding: 6px 8px !important; /* 减小内边距,使表格更紧凑 */ border: 1px solid #e2e8f0 !important; vertical-align: middle !important; /* 使用middle对齐,减少额外高度 */ word-wrap: break-word !important; word-break: break-word !important; white-space: normal !important; height: auto !important; min-height: auto !important; /* 确保最小高度自适应 */ max-height: none !important; /* 不限制最大高度 */ overflow: visible !important; line-height: 1.4 !important; /* 减小行高,使文字更紧凑 */ text-align: center !important; /* 确保所有单元格文字居中 */ } /* 表头样式 - 确保居中显示 */ .message-content table th, .markdown-content table th, .bot .message-content table th { background-color: #eef2ff !important; /* 轻微的紫色背景 */ color: #4F46E5 !important; /* 与网站主题色匹配 */ font-weight: 600 !important; text-align: center !important; /* 强制表头文字居中显示 */ padding: 8px 8px !important; /* 减小表头内边距,使其更紧凑 */ line-height: 1.4 !important; /* 保持与单元格一致的行高 */ height: auto !important; /* 高度自适应 */ min-height: auto !important; } /* 序号列(第一列)宽度和居中 */ .message-content table th:first-child, .message-content table td:first-child, .markdown-content table th:first-child, .markdown-content table td:first-child, .bot .message-content table th:first-child, .bot .message-content table td:first-child { width: 5% !important; min-width: 40px !important; text-align: center !important; vertical-align: middle !important; font-weight: 500 !important; height: auto !important; /* 确保高度自适应 */ min-height: auto !important; } /* 违规原文列(第二列)宽度 */ .message-content table th:nth-child(2), .message-content table td:nth-child(2), .markdown-content table th:nth-child(2), .markdown-content table td:nth-child(2), .bot .message-content table th:nth-child(2), .bot .message-content table td:nth-child(2) { width: 30% !important; } /* 违规原因列(第三列)宽度 */ .message-content table th:nth-child(3), .message-content table td:nth-child(3), .markdown-content table th:nth-child(3), .markdown-content table td:nth-child(3), .bot .message-content table th:nth-child(3), .bot .message-content table td:nth-child(3) { width: 30% !important; } /* 修改建议列(第四列)宽度 */ .message-content table th:nth-child(4), .message-content table td:nth-child(4), .markdown-content table th:nth-child(4), .markdown-content table td:nth-child(4), .bot .message-content table th:nth-child(4), .bot .message-content table td:nth-child(4) { width: 35% !important; } /* 普通 markdown 表格增强样式(排除审核结果等业务表) */ .message-content table:not(.audit-result):not(.risk-table), .markdown-content table:not(.audit-result):not(.risk-table), .bot .message-content table:not(.audit-result):not(.risk-table) { table-layout: auto !important; /* 让列宽根据内容自适应 */ } .message-content table:not(.audit-result):not(.risk-table) th, .message-content table:not(.audit-result):not(.risk-table) td, .markdown-content table:not(.audit-result):not(.risk-table) th, .markdown-content table:not(.audit-result):not(.risk-table) td, .bot .message-content table:not(.audit-result):not(.risk-table) th, .bot .message-content table:not(.audit-result):not(.risk-table) td { width: auto !important; min-width: 0 !important; } .message-content table:not(.audit-result):not(.risk-table) td, .markdown-content table:not(.audit-result):not(.risk-table) td, .bot .message-content table:not(.audit-result):not(.risk-table) td { text-align: left !important; /* 内容默认左对齐更易阅读 */ vertical-align: top !important; /* 从上方开始排版,减少空白 */ } .message-content table:not(.audit-result):not(.risk-table) th, .markdown-content table:not(.audit-result):not(.risk-table) th, .bot .message-content table:not(.audit-result):not(.risk-table) th { text-align: left !important; /* 表头同样左对齐,保持风格一致 */ white-space: nowrap !important; } /* 第一行文字居中 - 针对性强化 */ .message-content table tbody tr:first-child td, .markdown-content table tbody tr:first-child td, .bot .message-content table tbody tr:first-child td { text-align: center !important; vertical-align: middle !important; background-color: #f9fafb !important; /* 轻微的灰色背景 */ height: auto !important; /* 确保高度自适应 */ min-height: auto !important; } /* 让表格行有更好的视觉区分 */ .message-content table tbody tr:nth-child(even), .markdown-content table tbody tr:nth-child(even), .bot .message-content table tbody tr:nth-child(even) { background-color: #f9fafb !important; } .message-content table tbody tr:hover, .markdown-content table tbody tr:hover, .bot .message-content table tbody tr:hover { background-color: #f3f4f7 !important; } /* 专门针对审核结果表格的增强样式 */ table.audit-result, table[data-type="audit-result"], .message-content table.audit-result, .message-content table[data-type="audit-result"], .markdown-content table.audit-result, .markdown-content table[data-type="audit-result"], .bot .message-content table.audit-result, .bot .message-content table[data-type="audit-result"] { width: 100% !important; border: 1px solid #e2e8f0 !important; display: table !important; } /* 审核结果表格的单元格增强 */ table.audit-result th, table.audit-result td, table[data-type="audit-result"] th, table[data-type="audit-result"] td, .message-content table.audit-result th, .message-content table.audit-result td, .message-content table[data-type="audit-result"] th, .message-content table[data-type="audit-result"] td, .markdown-content table.audit-result th, .markdown-content table.audit-result td, .markdown-content table[data-type="audit-result"] th, .markdown-content table[data-type="audit-result"] td, .bot .message-content table.audit-result th, .bot .message-content table.audit-result td, .bot .message-content table[data-type="audit-result"] th, .bot .message-content table[data-type="audit-result"] td { padding: 6px 8px !important; /* 减小内边距,使表格更紧凑 */ vertical-align: middle !important; /* 使用middle对齐,减少高度 */ text-align: center !important; /* 确保所有单元格文字居中 */ height: auto !important; /* 确保高度自适应 */ min-height: auto !important; line-height: 1.4 !important; /* 保持紧凑的行高 */ } /* 审核结果表格的表头增强 - 强制居中 */ table.audit-result th, table[data-type="audit-result"] th, .message-content table.audit-result th, .message-content table[data-type="audit-result"] th, .markdown-content table.audit-result th, .markdown-content table[data-type="audit-result"] th, .bot .message-content table.audit-result th, .bot .message-content table[data-type="audit-result"] th { text-align: center !important; background-color: #eef2ff !important; /* 轻微的紫色背景 */ color: #4F46E5 !important; /* 与网站主题色匹配 */ } /* 审核结果表格第一行增强 - 强制居中 */ table.audit-result tbody tr:first-child td, table[data-type="audit-result"] tbody tr:first-child td, .message-content table.audit-result tbody tr:first-child td, .message-content table[data-type="audit-result"] tbody tr:first-child td, .markdown-content table.audit-result tbody tr:first-child td, .markdown-content table[data-type="audit-result"] tbody tr:first-child td, .bot .message-content table.audit-result tbody tr:first-child td, .bot .message-content table[data-type="audit-result"] tbody tr:first-child td { text-align: center !important; vertical-align: middle !important; background-color: #f9fafb !important; /* 轻微的灰色背景 */ height: auto !important; /* 确保高度自适应 */ min-height: auto !important; } /* 表格单元格文字黑色和居中显示(不包括表头) */ .message-content table td, .markdown-content table td, .bot .message-content table td, table td { color: #000000 !important; /* 确保所有普通单元格文字为黑色 */ text-align: center !important; /* 确保所有单元格文字居中 */ } /* 保持表头样式不变,但依然居中 */ .message-content table th, .markdown-content table th, .bot .message-content table th, table th { text-align: center !important; /* 确保表头文字居中 */ } /* 审核结果状态样式 */ .message-content table tr.safe-row td, .markdown-content table tr.safe-row td, .bot .message-content table tr.safe-row td, .message-content table.risk-table tr.safe-row td, .markdown-content table.risk-table tr.safe-row td, .bot .message-content table.risk-table tr.safe-row td, .safe-row td { color: #000000 !important; /* 正常黑色文本 */ } .message-content table tr.violation-row, .markdown-content table tr.violation-row, .bot .message-content table tr.violation-row, .message-content table.risk-table tr.violation-row, .markdown-content table.risk-table tr.violation-row, .bot .message-content table.risk-table tr.violation-row, .violation-row { background-color: rgba(239, 68, 68, 0.05) !important; /* 轻微红色背景 */ } .message-content table tr.warning-row, .markdown-content table tr.warning-row, .bot .message-content table tr.warning-row, .message-content table.risk-table tr.warning-row, .markdown-content table.risk-table tr.warning-row, .bot .message-content table.risk-table tr.warning-row, .warning-row { background-color: rgba(245, 158, 11, 0.05) !important; /* 轻微黄色背景 */ } /* 响应式样式 */ @media (max-width: 768px) { .message-content table, .markdown-content table, .bot .message-content table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; width: 100% !important; /* 确保在移动设备上也是100%宽度 */ } .message-content table th, .message-content table td, .markdown-content table th, .markdown-content table td, .bot .message-content table th, .bot .message-content table td { min-width: 120px !important; text-align: center !important; /* 确保在移动设备上也居中 */ } /* 即使在移动设备上也保持表格的宽度一致,只在需要时允许水平滚动 */ table.audit-result, table[data-type="audit-result"], .message-content table.audit-result, .message-content table[data-type="audit-result"], .markdown-content table.audit-result, .markdown-content table[data-type="audit-result"], .bot .message-content table.audit-result, .bot .message-content table[data-type="audit-result"] { display: block !important; overflow-x: auto !important; white-space: nowrap !important; width: 100% !important; } table.audit-result td, table[data-type="audit-result"] td, .message-content table.audit-result td, .message-content table[data-type="audit-result"] td, .markdown-content table.audit-result td, .markdown-content table[data-type="audit-result"] td, .bot .message-content table.audit-result td, .bot .message-content table[data-type="audit-result"] td { white-space: normal !important; min-width: 150px !important; text-align: center !important; /* 确保在移动设备上也居中 */ } } /* 暗黑模式表格样式优化 */ @media (prefers-color-scheme: dark) { /* 通用表格样式 - 暗黑模式 */ .message-content table, .markdown-content table, .bot .message-content table { background-color: rgba(30, 41, 59, 0.6) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } /* 表格单元格通用样式 - 暗黑模式 */ .message-content table th, .message-content table td, .markdown-content table th, .markdown-content table td, .bot .message-content table th, .bot .message-content table td { border-color: rgba(255, 255, 255, 0.15) !important; color: #e2e8f0 !important; /* 浅色文字 */ padding: 6px 8px !important; /* 与亮色模式保持一致的紧凑内边距 */ line-height: 1.4 !important; /* 紧凑的行高 */ height: auto !important; /* 高度自适应 */ min-height: auto !important; vertical-align: middle !important; /* 使用middle对齐 */ } /* 表头样式 - 暗黑模式 */ .message-content table th, .markdown-content table th, .bot .message-content table th { background-color: rgba(51, 65, 85, 0.8) !important; /* 深色背景 */ color: #cbd5e1 !important; /* 浅色文字 */ font-weight: 600 !important; border-color: rgba(99, 102, 241, 0.3) !important; /* 主题色边框 */ padding: 8px 8px !important; /* 与亮色模式保持一致 */ line-height: 1.4 !important; /* 紧凑的行高 */ height: auto !important; /* 高度自适应 */ min-height: auto !important; } /* 第一行文字居中 - 暗黑模式 */ .message-content table tbody tr:first-child td, .markdown-content table tbody tr:first-child td, .bot .message-content table tbody tr:first-child td { background-color: rgba(51, 65, 85, 0.4) !important; /* 深色背景 */ color: #e2e8f0 !important; height: auto !important; /* 确保高度自适应 */ min-height: auto !important; } /* 偶数行背景 - 暗黑模式 */ .message-content table tbody tr:nth-child(even), .markdown-content table tbody tr:nth-child(even), .bot .message-content table tbody tr:nth-child(even) { background-color: rgba(30, 41, 59, 0.4) !important; /* 深色背景 */ } /* 悬停效果 - 暗黑模式 */ .message-content table tbody tr:hover, .markdown-content table tbody tr:hover, .bot .message-content table tbody tr:hover { background-color: rgba(51, 65, 85, 0.6) !important; /* 深色悬停背景 */ } /* 审核结果表格 - 暗黑模式 */ table.audit-result, table[data-type="audit-result"], .message-content table.audit-result, .message-content table[data-type="audit-result"], .markdown-content table.audit-result, .markdown-content table[data-type="audit-result"], .bot .message-content table.audit-result, .bot .message-content table[data-type="audit-result"] { border-color: rgba(255, 255, 255, 0.15) !important; background-color: rgba(30, 41, 59, 0.6) !important; } /* 审核结果表格的表头 - 暗黑模式 */ table.audit-result th, table[data-type="audit-result"] th, .message-content table.audit-result th, .message-content table[data-type="audit-result"] th, .markdown-content table.audit-result th, .markdown-content table[data-type="audit-result"] th, .bot .message-content table.audit-result th, .bot .message-content table[data-type="audit-result"] th { background-color: rgba(99, 102, 241, 0.2) !important; /* 主题色背景 */ color: #e2e8f0 !important; /* 浅色文字 */ border-color: rgba(99, 102, 241, 0.4) !important; padding: 8px 8px !important; /* 保持紧凑的内边距 */ line-height: 1.4 !important; /* 紧凑的行高 */ height: auto !important; /* 高度自适应 */ min-height: auto !important; } /* 审核结果表格单元格 - 暗黑模式 */ table.audit-result td, table[data-type="audit-result"] td, .message-content table.audit-result td, .message-content table[data-type="audit-result"] td, .markdown-content table.audit-result td, .markdown-content table[data-type="audit-result"] td, .bot .message-content table.audit-result td, .bot .message-content table[data-type="audit-result"] td { padding: 6px 8px !important; /* 保持紧凑的内边距 */ line-height: 1.4 !important; /* 紧凑的行高 */ height: auto !important; /* 高度自适应 */ min-height: auto !important; vertical-align: middle !important; /* 使用middle对齐 */ } /* 审核结果表格第一行 - 暗黑模式 */ table.audit-result tbody tr:first-child td, table[data-type="audit-result"] tbody tr:first-child td, .message-content table.audit-result tbody tr:first-child td, .message-content table[data-type="audit-result"] tbody tr:first-child td, .markdown-content table.audit-result tbody tr:first-child td, .markdown-content table[data-type="audit-result"] tbody tr:first-child td, .bot .message-content table.audit-result tbody tr:first-child td, .bot .message-content table[data-type="audit-result"] tbody tr:first-child td { background-color: rgba(51, 65, 85, 0.4) !important; color: #e2e8f0 !important; height: auto !important; /* 确保高度自适应 */ min-height: auto !important; } /* 表格单元格文字颜色 - 暗黑模式(覆盖黑色文字) */ .message-content table td, .markdown-content table td, .bot .message-content table td, table td { color: #cbd5e1 !important; /* 浅色文字替代黑色 */ background-color: rgba(30, 41, 59, 0.3) !important; height: auto !important; /* 确保高度自适应 */ min-height: auto !important; padding: 6px 8px !important; /* 保持紧凑的内边距 */ line-height: 1.4 !important; /* 紧凑的行高 */ vertical-align: middle !important; /* 使用middle对齐 */ } /* 审核结果状态样式 - 暗黑模式 */ .message-content table tr.safe-row td, .markdown-content table tr.safe-row td, .bot .message-content table tr.safe-row td, .message-content table.risk-table tr.safe-row td, .markdown-content table.risk-table tr.safe-row td, .bot .message-content table.risk-table tr.safe-row td, .safe-row td { color: #86efac !important; /* 绿色文字 */ background-color: rgba(16, 185, 129, 0.15) !important; } .message-content table tr.violation-row, .markdown-content table tr.violation-row, .bot .message-content table tr.violation-row, .message-content table.risk-table tr.violation-row, .markdown-content table.risk-table tr.violation-row, .bot .message-content table.risk-table tr.violation-row, .violation-row { background-color: rgba(239, 68, 68, 0.2) !important; /* 红色背景增强 */ } .message-content table tr.violation-row td, .markdown-content table tr.violation-row td, .bot .message-content table tr.violation-row td, .violation-row td { color: #fca5a5 !important; /* 浅红色文字 */ } .message-content table tr.warning-row, .markdown-content table tr.warning-row, .bot .message-content table tr.warning-row, .message-content table.risk-table tr.warning-row, .markdown-content table.risk-table tr.warning-row, .bot .message-content table.risk-table tr.warning-row, .warning-row { background-color: rgba(245, 158, 11, 0.2) !important; /* 黄色背景增强 */ } .message-content table tr.warning-row td, .markdown-content table tr.warning-row td, .bot .message-content table tr.warning-row td, .warning-row td { color: #fcd34d !important; /* 浅黄色文字 */ } }