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:

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

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.