为什么我的 table 周围有一个像素点 space？

Question

我有一个 table，我想从屏幕的正左侧和顶部开始，但看起来它的左侧和顶部有一个 1 像素 space。不知道为什么。

我试过将页边距、边框等全部设为 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>

我希望 table 正好从浏览器 window 区域的左侧和顶部开始，但我可以看到 table 左侧和顶部 1 像素处的灰色背景。

看起来我不能把正文样式放在这里，但它的样式是所有边距都为 0，即顶部、左侧和背景颜色为灰色...只是为了确保它是table 显示后面的网页，而不是浏览器出于某种原因在左侧和顶部添加一些内容。

Answer 1

这可以通过在 table 元素上设置 border-collapse: collapse; 来解决。这可以防止浏览器通过合并相邻单元格的边框在 table 组件的边框之间添加任何额外的填充（在本例中，它是在单元格边框和不存在的 table 边框之间填充）。你可以直观地看到差异 in this diagram:

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

（最初作为评论发布以确认它解决了问题）

为什么我的 table 周围有一个像素点 space？

Why is there a pixel space around my table?

html

styles

margin

padding

zero