WordPress文章表格文本与正文样式不一致问题求助

我正在制作一个包含大型复杂表格的文章模板，在WordPress经典编辑器的「可视化」模式下编辑时，表格样式与正文匹配，但发布后文本样式完全不符。已尝试在CSS样式表中新增table2类调整样式，但发布内容无变化。

表格HTML代码 #

<table class="table2" border="1" width="100%">
    <tbody>
        <tr>
            <td>
                <table border="0" width="100%">
                    <colgroup>
                        <col style="width: 50%;" span="1" />
                        <col style="width: 50%;" span="1" />
                    </colgroup>
                    <tbody>
                        <tr>
                            <td> LOG DATE:</td>
                            <td> [xyz-ips snippet="ACF-Log-Date"]</td>
                        </tr>
                        <tr>
                            <td> CHASE VEHICLE:</td>
                            <td> [xyz-ips snippet="ACF-Chase-Vehicle"]</td>
                        </tr>
                        <tr>
                            <td> CHASE PARTNERS:</td>
                            <td> [xyz-ips snippet="ACF-Chase-Partners"]</td>
                        </tr>
                        <tr>
                            <td> TARGET REGION:</td>
                            <td> [xyz-ips snippet="ACF-Target-Region"]</td>
                        </tr>
                        <tr>
                            <td> MILES DRIVEN</td>
                            <td> [xyz-ips snippet="ACF-Chase-Miles"]</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table class="table2" border="0" width="50%">
                    <tbody>
                        <tr>
                            <td align="center">SPC OUTLOOK: [xyz-ips snippet="ACF-SPC-Outlook"]
                                <table border="0" width="100%">
                                    <tbody>
                                        <tr>
                                            <td align="center">TORNADO</td>
                                            <td align="center">HAIL</td>
                                            <td align="center">WIND</td>
                                        </tr>
                                        <tr>
                                            <td align="center">[xyz-ips snippet="ACF-SPC-Tornado"]</td>
                                            <td align="center">[xyz-ips snippet="ACF-SPC-Hail"]</td>
                                            <td align="center">[xyz-ips snippet="ACF-SPC-Wind"]</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table class="table2" border="0" width="100%">
                                    <tbody>
                                        <tr>
                                            <td>TORNADOES SEEN:</td>
                                            <td>[xyz-ips snippet="ACF-Tornado"]</td>
                                        </tr>
                                        <tr>
                                            <td>HAIL ENCOUNTERED:</td>
                                            <td>[xyz-ips snippet="ACF-Hail"]"</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

当前CSS代码 #

/*table*/
table {
    width: 100%;
    text-align: left;
    margin: 0 0 1.5em 0;
    font-size: 80%;
}
th, td {
    padding: 1em 0.8em 0.8em 0.8em;
    border-top: 1px solid rgba(100,100,100,0.2);
    line-height: 1.5em;
}
th {
    border-top: none;
}

/*table for chase logs*/
table2 {
    width: 100%;
    text-align: left;
    margin: 0 0 0 0;
    font-size: 100%;
}
th, td {
    padding: 0em 0em 0em 0em;
    border-top: 0px solid rgba(100,100,100,0.2);
    line-height: 1.5em;
}
th {
    border-top: none;
}

你的CSS代码存在两个核心问题，导致样式不生效：

1. 类选择器语法错误：table2是类选择器，必须以.开头，正确写法为.table2，否则浏览器无法识别这个类样式。
2. 样式全局覆盖问题：单独定义的th, td样式会覆盖全局所有表格的单元格样式，而非仅作用于.table2下的单元格，需要给选择器添加父类限定。

修正后的CSS代码如下：

/*table*/
table {
    width: 100%;
    text-align: left;
    margin: 0 0 1.5em 0;
    font-size: 80%;
}
table th, table td {
    padding: 1em 0.8em 0.8em 0.8em;
    border-top: 1px solid rgba(100,100,100,0.2);
    line-height: 1.5em;
}
table th {
    border-top: none;
}

/*table for chase logs*/
.table2 {
    width: 100%;
    text-align: left;
    margin: 0 0 0 0;
    font-size: 100%;
}
.table2 th, .table2 td {
    padding: 0;
    border-top: 0;
    line-height: 1.5em;
}
.table2 th {
    border-top: none;
}

额外建议：

• 移除HTML中的border、width、align等内联属性，统一用CSS控制样式，减少样式冲突。
• 若嵌套表格也需要应用.table2的样式，可添加.table2 table选择器来覆盖全局表格样式。

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