Почему вокруг моего стола пиксельное пространство?

Question

У меня есть таблица, которую я хотел бы начать точно в левом и верхнем углу экрана, но, похоже, слева от нее и в верхней части экрана есть пространство в 1 пиксель.Не знаю, почему.

Я перепробовал поля, границы и т. Д., Но не смог избавиться от пикселей.

<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.Это не позволяет браузеру добавлять какие-либо дополнительные отступы между границами компонентов таблицы (в данном случае это были отступы между границами ячеек и несуществующей границей таблицы) путем слияния границ для соседних ячеек.Вы можете увидеть разницу визуально на этой диаграмме :

Альтернативным решением было бы установить border-spacing: 0; на table элемент.Это не объединит границы соседних ячеек, но все равно удалит отступ между ними:

---

(Первоначальноопубликовано как комментарий, чтобы подтвердить, что это решило проблему)