Задать вопрос
@Openmen
css

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

Здравствуйте! Не могу понять почему не совпадают границы таблицы HTML с линиями клеточного фона CSS. В чём подвох?
Вот так выглядит в Хроме последней версии (Чёрные линии - это границы таблицы, более светлые - линии фона на CSS.):
5af851008469a860790352.png
Чёрные линии - это границы таблицы, более светлые - линии фона на CSS.
Код HTML
<!DOCTYPE HTML>
<html>
 <head>
	<link rel="stylesheet" href="style.css" type="text/css"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
	
 <body>
	<title>Документ  без названия</title>
	<div class="grid">
 <table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
</div>
	
</body>
</html>
Код СSS
table {
  width:1080px;
  height:800px;
  border-collapse: collapse;
}


td, th { 
  width:120px;
  height:60px;
  border: 1px solid black;
}

.grid {
  margin:70px auto;
  width:1080px;
  height:820px;
  box-shadow:1px 1px 3px #333;
  background-color:#3A78A1;
  background-image:
    linear-gradient(#83ABC4 1px, transparent 1px),
    linear-gradient(90deg, #83ABC4 1px, transparent 1px),
    linear-gradient(#3A78A1 1px, transparent 1px),
    linear-gradient(90deg, #3A78A1 1px, transparent 1px),
    linear-gradient(#4E86AB 1px, transparent 1px),
    linear-gradient(90deg, #4E86AB 1px, transparent 1px);
  background-size:
    120px 60px,
    120px 60px,
    5px 5px,
    5px 5px,
    20px 20px,
    20px 20px;
  background-position:
    -1px -1px,
    -1px -1px,
    0 0,
    0 0,
    -1px -1px,
    -1px -1px;
}



Или может подскажете другой способ? Заранее всем спасибо!
  • Вопрос задан
  • 129 просмотров
1 комментарий
Подписаться 1 Средний 1 комментарий
Пригласить эксперта
Ответы на вопрос 1
@Openmen Автор вопроса
border: 1px solid black; - это свойство увеличивает ширину и высоту на 2 пикселя (1 пиксель левая граница и 1 пиксель правая граница) по длине и аналогично по высоте. Поэтому вместо border нужно использовать outline.

Всем спасибо!
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать и интегрировать модуль на WordPress
26 апр. 2024, в 19:53
5000 руб./за проект
Разработать Telegram mini app
15 апр. 2024, в 22:14
30000 руб./за проект
Сделать тг бота для сбора 4 данных в эксель + проверка на подписку
26 апр. 2024, в 19:17
1000 руб./за проект
Ещё заказы