如何让表格页脚颜色与表头颜色匹配？

我正在创建一个多行表格，希望表头与页脚颜色一致，奇数行使用不同颜色。尝试设置表头和页脚相同的样式属性，但未生效，奇数行的样式代码似乎覆盖了页脚的目标颜色，已关联styles.css文件，但页脚仍未按预期显示。

原始代码 #

HTML文件 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <table style="width:100%">
        <tr>
            <th>Country</th>
            <th>OrderID</th>
            <th>Order Amount</th>
        </tr>
        <tr>
            <td>USA</td>
            <td>1000</td>
            <td>$1,300</td>
        </tr>
        <tr>
            <td>USA</td>
            <td>1001</td>
            <td>$700</td>
        </tr>
        <tr>
            <td>CA</td>
            <td>1002</td>
            <td>$2,000</td>
        </tr>
        <tr>
            <td>CA</td>
            <td>1003</td>
            <td>$1,000</td>
        </tr>
        <tr>
            <tfoot>
                <td colspan="2">Total</td>
                <td>$5,000</td>
            </tfoot>
        </tr>
    </table>
</body>
</html>

styles.css文件 #

body {
    margin: 10px;
}

table, th, td {
    border: 1px solid #c4dcf3;
    border-left: 0;
    border-right: 0;
    border-collapse: collapse;
}

td, th {
    padding: 10px;
}

th {
    background-color: #427fef; 
    color: white;
}

tr:nth-child(odd) {
    background-color: #eef7ff;
}

tfoot {
    text-align: left;
    background-color: #427fef;
} 

问题原因 #

1. HTML结构不规范：<tfoot>被错误嵌套在<tr>内部，它应该作为<table>的直接子元素，与表头、表体同级。
2. CSS样式冲突：tr:nth-child(odd)会选中所有奇数行，包括包含页脚的行；且<tfoot>的背景色不会自动传递给内部的<td>，导致页脚样式不生效。

修复方案 #

1. 修正HTML结构 #

将<tfoot>移出<tr>，并给表体部分添加<tbody>标签，让表格结构符合规范：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <table style="width:100%">
        <!-- 表头 -->
        <tr>
            <th>Country</th>
            <th>OrderID</th>
            <th>Order Amount</th>
        </tr>
        <!-- 表体 -->
        <tbody>
            <tr>
                <td>USA</td>
                <td>1000</td>
                <td>$1,300</td>
            </tr>
            <tr>
                <td>USA</td>
                <td>1001</td>
                <td>$700</td>
            </tr>
            <tr>
                <td>CA</td>
                <td>1002</td>
                <td>$2,000</td>
            </tr>
            <tr>
                <td>CA</td>
                <td>1003</td>
                <td>$1,000</td>
            </tr>
        </tbody>
        <!-- 页脚 -->
        <tfoot>
            <tr>
                <td colspan="2">Total</td>
                <td>$5,000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

2. 调整CSS样式 #

• 限制奇数行样式仅作用于<tbody>内的行，避免影响表头和页脚
• 给页脚的<td>设置与表头一致的样式：

body {
    margin: 10px;
}

table, th, td {
    border: 1px solid #c4dcf3;
    border-left: 0;
    border-right: 0;
    border-collapse: collapse;
}

td, th {
    padding: 10px;
}

th {
    background-color: #427fef; 
    color: white;
}

/* 仅对tbody内的奇数行设置背景色 */
tbody tr:nth-child(odd) {
    background-color: #eef7ff;
}

/* 设置页脚单元格样式，与表头保持一致 */
tfoot td {
    text-align: left;
    background-color: #427fef;
    color: white;
}

修复后，表头与页脚会显示一致的蓝色背景和白色文字，<tbody>内的奇数行则显示浅蓝背景，样式不会互相覆盖，完全符合预期。

内容的提问来源于stack exchange，提问作者ojcodes7