Why is there a pixel space around my table?

Question

I have a table that I would like to start on exact left and top of screen, but it looks like there is a 1 pixel space to the left and top of it. Not sure why.

I've tried margins, borders, etc all to 0, but can't get rid of the pixels.

<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>

I expect the table to start at the exact left and top of browser window area, but I can see the grey background 1 pixel left and top of the table.

It looks like I can't put the body style here but the style for that is all margins to 0 i.e. top, left, and the background color to grey... just to make sure it is part of the web page behind the table showing, not the browser adding some to the left and top for whatever reason.

Answer 1

This can be solved by setting border-collapse: collapse; on the table element. This prevents the browser from adding any additional padding between the borders of your table components (in this case, it was padding between the cell borders and the nonexistent table border), by merging borders for adjacent cells. You can see the difference visually in this diagram:

An alternate solution would be to set border-spacing: 0; on the table element. This will not combine borders from adjacent cells, but will still remove the padding between them:

---

(Originally posted as a comment to confirm it resolved the issue)