Прокладка на теле

Я использую vBulletin для оформления форума, который в основном использует таблицы для оформления сайта. Как мне использовать отступы для tbody, чтобы отделить содержимое от границы?

Здесь вы можете увидеть изображение моего основного сайта, где содержимое отодвинуто на 5 пикселей от границы:

В то время как в vBulletin добавление отступов к tbody не отталкивает содержимое:


html css vbulletin
person Jordan Doyle    schedule 04.01.2014    source источник

Ответы (1)


arrow_upward
31
arrow_downward

Метод 1
У вас есть несколько вариантов:

tbody:before {
  content: '';
  display: block;
  height: 20px;
}

Добавление этого в основном «вставляет» контент перед концом. Это своего рода «быстрое и грязное» решение.


Метод 2
Другой вариант — присвоить table значение border-collapse: collapse, а затем присвоить tbody значение границы:

table {
  border-collapse: collapse;
}
table tbody {
  border-right: 20px solid transparent;
}


Однако оба эти метода имеют недостатки. Селектор before может не работать в IE7 и требует !DOCTYPE для работы в IE8. Второй метод иногда может быть немного обидчивым, в зависимости от остальной части вашего css. Убедитесь, что у вас есть !DOCTYPE

person smts    schedule 04.01.2014
comment
Для совместимости с IE8 вам нужно будет использовать одиночные двоеточия. В противном случае синтаксис с двойным двоеточием поддерживается только IE9 и более поздними версиями. - person BoltClock; 04.01.2014
comment
В IE9 это, похоже, не применяет высоту для меня. Он работает в Chrome и IE11, но не в IE9. Если я изменяю содержимое на что-то вроде xyz, появляются символы, поэтому стиль определенно применяется, но высота просто не дает столько пикселей пространства. - person Sterno; 31.07.2015
comment
Как насчет использования псевдоэлементов :first-child :last-child в tr внутри tbody. Дополнительные сведения см. на странице stackoverflow.com/a/294925/339803. - person redfox05; 08.11.2015