Padding on tbody

Question

I'm using vBulletin to style a forum which primarily uses tables to style the site. How would I go about using padding on a tbody to space the content away from the border?

Here you can see a picture of my main site where the content is pushed 5px away from the border:

Whereas on vBulletin, adding padding on tbody doesn't push the content away:

Crustaceous

Answer 1

Method 1
You have a couple different options:

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

Adding this basically "inserts" content before the end. It's sort of a "quick-n-dirty" fix.


Method 2
Another option is giving your table a border-collapse: collapse and then giving your tbody a border value:

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

Both of these methods have drawbacks, however. The before selector might not work in IE7, and requires a !DOCTYPE to work in IE8. The second method can sometimes be a bit touchy, depending on the rest of your css. Be sure to have a !DOCTYPE

Bali

For IE8 compatibility you will need to use single colons. Otherwise the double colon syntax is only supported by IE9 and later. – Synopsis

In IE9, this does not seem to be applying the height for me. It works in Chrome and IE11, but not IE9. If I change content to something like "xyz", the characters show up so the style is definitely being applied, but the height simply isn't putting that many pixels of space in there. – Cynosure

What about using pseudo elements :first-child :last-child on the tr within tbody. More info at https://mcmap.net/q/187715/-how-to-put-spacing-between-tbody-elements – Alicia

Answer 2

Add an empty col and/or row with padded cells.

Adding :before content to tbody may not have the effect you're looking for. It may not push borders around as you think or even other cells or col or row groups. In general do not try to put anything outside a cell in a table, you're asking for trouble.

Luther