Padding on tbody

html css vbulletin

Jordan Doyle · Jan 4, 2014 · Viewed 23.3k times · Source

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

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

Padding on tbody

Answer

Related questions