jude-cehua/static/css/components/tables.css

/* 表格样式组件 */

/* 通用表格样式 */
.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; /* 浅黄色文字 */
  }
}