質問: Не могу понять почему не совпадают границы таблицы 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; } ``` ``` ```
回答: border: 1px solid black; - это свойство увеличивает ширину и высоту на 2 пикселя (1 пиксель левая граница и 1 пиксель правая граница) по длине и аналогично по высоте. Возможно, дело в этом. Вместо border сделай outline и разверни на всю страницу. У меня всё сошлось. ``` * { 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; outline: 1px solid black; } ``` ``` ```