Как сделать фиксированный отступ верхней границы ячейки таблицы от края ячейки?

Есть вот такая, залитая жёлтым фоном, ячейка таблицы:
jsfiddle.net/kLzd2vj1

Как сделать фиксированный отступ (к примеру 20px; ), зелёной верхней границы ячейки, от левого края?

Чтобы получилось вот так:
ea76b54191bd48ca97d1299f04091523.png
  • Вопрос задан
  • 317 просмотров
Решения вопроса 1
petyagrill
@petyagrill
все очень просто, учитывая вашу конструкцию
изменен только код css
jsfiddle.net/kLzd2vj1/2
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@IceJOKER
Web/Android developer
Самый просто вариант завернуть таблицу в div с position: relative; и в него добавить еще один
div с
position: absolute; 
top: 0;
left: 0;
height: 10px;
background-color: yellow;
width: 20px; /*нужная ширина*/


Лень было особо возиться - jsfiddle.net/kLzd2vj1/3 , можно еще грамотнее сделать
Ответ написан
Комментировать
DMShamonov
@DMShamonov
Frontend developer
Для border отступ задать невозможно.
Как вариант, сделай png с зелёной строкой и нужным отступом слева и примени свойство:
background: yellow url(line.png) no-repeat 0 0; Но в этом случае нужно делать очень длинную линию что бы заложить возможность применения в ячейках разной ширины.
Либо так.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы