为何HTML嵌套表格的border-collapse属性未生效？

你只给表格设置了border-collapse: collapse;，但这个属性仅负责让相邻单元格的边框合并，并没有给表格的表头（）和单元格（）添加实际的边框样式——没有边框样式，自然看不到内部的线条。

要显示内部边框，你需要给所有表格的和加上border属性。下面是修改后的代码：

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

如果觉得内联样式太繁琐，也可以用CSS选择器统一设置：

table, table th, table td {
    border: 1px solid #000;
    border-collapse: collapse;
}

这样所有表格的单元格都会自动带上边框，同时合并相邻边框。

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