Почему не совпадают границы ячеек таблицы HTML с линиями клеточного фона CSS?

Не могу понять почему не совпадают границы таблицы HTML с линиями клеточного фона CSS. В чём подвох?
Вот так выглядит в Хроме последней версии (Чёрные линии - это границы таблицы, более светлые - линии фона на CSS.):
* { margin: 0; padding: 0; } table { margin: 70px auto; border-collapse: collapse; background: linear-gradient( #bbb, transparent 1px), linear-gradient( 90deg, #bbb, transparent 1px); background-size: 20px 20px; background-position: -1px 1px; } td, th { width: 120px; height: 60px; border: 1px solid black; }

Ответ

Возможно лучше подойдет реализация через тени, они предоставляют больше пространства для действий.
box-shadow: 0px 0px 0px 1px #000000 inset;
Но самое простое решение проблемы это изменить алгоритм расчета ширины элементов. Чтобы рамка не увеличивала элементы для этого добавьте свойство
box-sizing: border-box;
элементам td, th
td, th { width: 120px; height: 60px; box-sizing: border-box; border: 1px solid black; }
И будет Вам счастье.
* { margin: 0; padding: 0; } table { margin: 70px auto; border-collapse: collapse; background: linear-gradient( #bbb, transparent 1px), linear-gradient( 90deg, #bbb, transparent 1px); background-size: 20px 20px; background-position: -1px 1px; } td, th { width: 120px; height: 60px; box-sizing: border-box; border: 1px solid black; }