表的CSS高度超过身体的高度

Question

我正在尝试使用表格作为图像地图的替代品，以便它可以响应，但出于某种原因，在将桌子的高度设置为100％后，它仍然会越过身体，我可以'弄清楚原因。

CSS和HTML：

        body, 
        html {
            padding:0;
            margin:0;
            width:100%;
            height:100%;
        }

        body {
            background-color:black;
        }

        html {
            background-color:white;
        }

        table {
            border-spacing:0;
            border-collapse: collapse;
            height:100%;
            margin:0 auto;
        }

        td {
            margin:0;
            padding:0;
            height:100%;
        }

        tr {
            height:100%;
        }

        <table>
            <tr data-name="row1">
                <td data-name="pic1">
                    <a class="openBox" data-source="split/A1-4096-0171.mp4">
                        <img src="thumb/A1-4096-0171.png">
                    </a>
                </td>

                <td data-name="pic2">
                    <a class="openBox" data-source="split/B1-4096-0171.mp4">
                        <img src="thumb/B1-4096-0171.png">
                    </a>
                </td>
            </tr>

            <tr data-name="row2">
                <td data-name="pic3">
                    <a class="openBox" data-source="split/A2-4096-0171.mp4">
                        <img src="thumb/A2-4096-0171.png">
                    </a>
                </td>

                <td data-name="pic4">
                    <a class="openBox" data-source="split/B2-4096-0171.mp4">
                        <img src="thumb/B2-4096-0171.png">
                    </a>
                </td>
            </tr>

            <tr data-name="row3">
                <td data-name="pic5">
                    <a class="openBox" data-source="split/A3-4096-0171.mp4">
                        <img src="thumb/A3-4096-0171.png">
                    </a>
                </td>

                <td data-name="pic6">
                    <a class="openBox" data-source="split/B3-4096-0171.mp4">
                        <img src="thumb/B3-4096-0171.png">
                    </a>
                </td>
            </tr>

            <tr data-name="row4">
                <td data-name="pic7">
                    <a class="openBox" data-source="split/A4-4096-0171.mp4">
                        <img src="thumb/A4-4096-0171.png">
                    </a>
                </td>

                <td data-name="pic8">
                    <a class="openBox" data-source="split/B4-4096-0171.mp4">
                        <img src="thumb/B4-4096-0171.png">
                    </a>
                </td>
            </tr>
        </table>

问题的屏幕截图：

黑色是正文背景是body标记，而白色是html标记，因此表格由于某种原因在外面正文顺便看看它的样子。它应该不高于基于我的CSS的窗口，对吗？