求助：HTML中两种表格样式互相覆盖，如何正确设置？

你的问题主要出在CSS属性的错误归属、表格未绑定对应class以及样式规则不明确这几个点上，以下是具体修正：

关键错误点 #

• border-collapse: collapse 是<table>元素的专属属性，写在<td>上无法生效，还会导致样式优先级混乱。
• 你没有给<table>标签添加对应的class="table1"/class="table2"，导致CSS样式无法绑定到目标表格，反而继承了body的全局样式。
• table2的单元格未明确设置border: none，可能继承了其他边框规则；同时表格本身缺少统一的边框合并规则。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 全局body样式 */
        body {
            background-color: black;
            color: white;
            font-family: Calibri;
        }

        /* 表格1：黑底、白边框、白字 */
        table.table1 {
            border-collapse: collapse; /* 表格边框合并，必须放在table上 */
            width: 250px;
            font-family: Consolas;
        }
        table.table1 td {
            background-color: black;
            color: white;
            border: 6px solid white;
            padding: 8px; /* 可选：增加内边距优化显示 */
        }

        /* 表格2：白底、无边框、黑字 */
        table.table2 {
            border-collapse: collapse;
            width: 200px;
            font-size: 13px;
        }
        table.table2 td {
            background-color: white;
            color: black;
            border: none; /* 明确取消边框 */
            padding: 8px;
        }
    </style>
</head>
<body>
    <!-- 带table1样式的表格 -->
    <table class="table1">
        <tr>
            <td>对话框1内容</td>
            <td>测试单元格</td>
        </tr>
    </table>

    <br>

    <!-- 带table2样式的表格 -->
    <table class="table2">
        <tr>
            <td>对话框2内容</td>
            <td>测试单元格</td>
        </tr>
    </table>
</body>
</html>

修正说明 #

1. 将border-collapse: collapse移至<table>选择器下，确保表格边框正确合并，避免样式冲突。
2. 给每个<table>标签添加对应class，让CSS样式精准匹配目标表格。
3. 为table2的<td>明确设置border: none，彻底消除边框。
4. 补充padding属性优化单元格内容的显示间距，提升可读性。
5. 将样式代码移至<head>标签内，符合HTML规范。

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