为什么我的桌子周围有像素空间？

Question

我有一张要在屏幕的左上角和右上角开始的表格，但是看起来好像在它的左上角和顶部有1个像素空间。不知道为什么。

我尝试将页边距，边框等全部设置为0，但无法消除像素。

<table style="width:100%;height:100%;max-width:750px;max-height:1334px;">

    <tr style="height:5%;background-color:#e31837">
        <td align="center"></td>
    </tr>

    <tr>
        <td align="center"></td>
    </tr>

    <tr style="height:10%;background-color:#e31837">
        <td align="center">
            <table style="width:100%;color:white;font-size:26px;font-family:sans-serif">
                <tr><td align="center"><p class="example"><b>TEXT</b></p></td>                      
                </tr>
            </table>
        </td>
    </tr>

</table>

我希望表格从浏览器窗口区域的确切左侧和顶部开始，但是我可以看到灰色背景在表格左侧和顶部1像素。

看来我无法在此处放置人体样式，但是该样式的所有边距均为0，即顶部，左侧，背景颜色为灰色...只是为了确保它是网页的一部分在显示的表格后面，而不是浏览器出于某种原因在左侧和顶部添加了一些内容。

Answer 1

这可以通过在border-collapse: collapse;元素上设置table来解决。通过合并相邻单元格的边界，这可以防止浏览器在表组件的边界之间添加任何其他填充（在这种情况下，是在单元格边界和不存在的表边界之间进行填充）。您可以在视觉上in this diagram看到差异：

另一种解决方案是在border-spacing: 0;元素上设置table。这将不合并相邻单元格的边框，但仍会删除它们之间的填充：

---

（最初以评论形式发布，以确认它已解决问题）