htmlcssvbulletin

Padding on tbody

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:

Solution

  • 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