/* 表格基础样式 */
.table {
    width: 100%;
    border-collapse: collapse;
    
    margin-top: 15px;
}

/* 表头与单元格统一样式：消除第一列（th）与其他列（td）视觉差异 */
.table th,
.table td {
    padding: 12px 15px;
    text-align: left;
    
    font-size: 1rem;
    font-weight: normal; /* 取消表头默认加粗，与单元格字体权重一致 */
    color: #333; /* 统一文字颜色，避免表头与单元格颜色差异 */
    background-color: transparent; /* 取消表头默认背景，让表头背景跟随行变色逻辑 */
}

/* 隔行变色：表头（th）与单元格（td）同步继承行背景，视觉统一 */
.table tbody tr:nth-child(even) {
    background-color: #dedede; /* 偶数行浅灰色，第一列th同步继承 */
}
.table tbody tr:nth-child(odd) {
    background-color: #ffffff; /* 奇数行白色，第一列th同步继承 */
}

/* 行悬停效果：整行（含第一列）同步变色，无视觉割裂 */
.table tbody tr:hover {
    background-color: #f0f0f0;
    transition: background-color 0.2s ease;
}

/* 单元格宽度优化：取消第一列特殊宽度，按内容比例分配，视觉更均衡 */
.th-width,
.td-width-3 {
    width: auto; /* 取消固定宽度，让列宽自适应内容 */
    min-width: 100px; /* 保留最小宽度，避免内容挤压 */
}

/* 响应式调整：小屏幕下统一压缩内边距和字体，保持整体一致性 */
@media (max-width: 768px) {
    .table th,
    .table td {
        padding: 10px 8px;
        font-size: 0.9rem;
    }
    h1 {
        font-size: 1.5rem;
        margin: 0 0 15px; /* 优化标题边距，避免与表格紧贴 */
    }
}

@media (max-width: 480px) {
    /* 小屏幕添加表格横向滚动容器，避免内容溢出 */
    .table-container {
        overflow-x: auto;
    }
    .table th,
    .table td {
        padding: 8px 5px;
        font-size: 0.85rem;
    }
}