jude-cehua/static/css/table-fix.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; /* 强制表格显示为表格，而不是块 */
}

/* 表格单元格通用样式 */
.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: 10px !important;
    border: 1px solid #e2e8f0 !important;
    vertical-align: top !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    height: auto !important;
    overflow: visible !important;
    line-height: 1.5 !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: 12px 10px !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;
}

/* 违规原文列(第二列)宽度 */
.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;
}

/* 第一行文字居中 - 针对性强化 */
.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; /* 轻微的灰色背景 */
}

/* 让表格行有更好的视觉区分 */
.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: 12px !important;
    vertical-align: top !important;
    text-align: center !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; /* 轻微的灰色背景 */
}

/* 响应式样式 */
@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; /* 确保在移动设备上也居中 */
    }
}

/* 表格单元格文字黑色和居中显示（不包括表头） */
.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; /* 确保表头文字居中 */
}

/* 覆盖safe-row的颜色，也使用黑色 */
.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 td,
.markdown-content table tr.violation-row td,
.bot .message-content table tr.violation-row td,
.message-content table.risk-table tr.violation-row td,
.markdown-content table.risk-table tr.violation-row td,
.bot .message-content table.risk-table tr.violation-row td {
    color: var(--audit-fail-color) !important;
}

.message-content table tr.warning-row td,
.markdown-content table tr.warning-row td,
.bot .message-content table tr.warning-row td {
    color: var(--warning-color) !important;
}
*/

/* 确保所有表格单元格都居中显示和文字黑色 - 最高优先级规则 */
.message-content table td,
.markdown-content table td,
.bot .message-content table td,
table td,
tr td,
tbody td,
.message-content tbody td,
.markdown-content tbody td {
    text-align: center !important;
    color: #000000 !important;
    vertical-align: middle !important; /* 垂直居中 */
}