为什么 border-collapse 属性对我的 HTML 表格不起作用

Question

我有下表和嵌套表。为什么边框折叠属性对我的 HTML 表格不起作用。

我在主表和嵌套表上添加了 border-collapse 属性。我只看到外边框，没有内边框。

<table style="border-collapse: collapse;">
    <tr>
        <th>Existing data</th>
        <th>New table</th>
    </tr>
    <tr>
        <td>
            <!-- Nested Table 1 -->
            <table style="border-collapse: collapse;">
                <tr>
                    <th>Hostname</th>
                    <th>IP</th>
                    <th>MAC</th>
                </tr>
                <tr>
                    <td>ftp01</td>
                    <td>10.1.1.4</td>
                    <td>...01</td>
                </tr>
                <tr>
                    <td>www01</td>
                    <td>10.1.1.5</td>
                    <td>...02</td>
                </tr>
            </table>
        </td>
        <td>
            <!-- Nested Table 2 -->
            <table style="border-collapse: collapse;">
                <tr>
                    <th>IP</th>
                    <th>MAC</th>
                    <th>Owner</th>
                </tr>
                <tr>
                    <td>10.1.1.4</td>
                    <td>...bb</td>
                    <td>alice</td>
                </tr>
                <tr>
                    <td>10.1.1.6</td>
                    <td>...cc</td>
                    <td>bob</td>
                </tr>
                <tr>
                    <td>10.1.1.7</td>
                    <td>...dd</td>
                    <td>chris</td>
                </tr>
                <tr>
                    <td>10.1.1.4</td>
                    <td>...ee</td>
                    <td>doug</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer 1

如果您对 HTML 表格中消失的内部边框感到困惑。有一个快速修复方法！只需注意保存这些嵌套表格的外部单元格即可。使用 style="border: 1px Solid black;" 添加一点风格在这些元素上，即使在 border-collapse:collapse; 时，您也会看到那些内部边框弹出回到视图中。正在做它的事情。查看下面的 HTML：

<table style="border-collapse: collapse;">
    <tr>
        <th>Existing data</th>
        <th>New table</th>
    </tr>
    <tr>
        <td style="border: 1px solid black;">
            <!-- Nested Table 1 -->
            <table style="border-collapse: collapse;">
                <!-- Table content -->
            </table>
        </td>
        <td style="border: 1px solid black;">
            <!-- Nested Table 2 -->
            <table style="border-collapse: collapse;">
                <!-- Table content -->
            </table>
        </td>
    </tr>
</table>