CODEWITHSUNDEEP
htmlcss
Tony_Henrich
Tony_Henrich

Reputation: 44095

Good way to add some space between html table rows using css? Works across all browsers including IE6

What's a good way to add some space between html table rows using css? Should work in all browsers including IE6. Should use id or class so it doesn't affect every table in the site. Prefer to declare the css at the table level. Don't want to use empty tr's to simulate a blank row. css should not affect any inner tables.

Logically I tried this but margins don't work with tr's:

.someclass tr
{
  margin-bottom:20px;
}

Upvotes: 6

Views: 21624

Answers (5)

anand24
anand24

Reputation: 321

<tr><td><br></td></tr>

The above creates a gap between 2 rows with the <br> tag

Upvotes: 0

Sandeep Choudhary
Sandeep Choudhary

Reputation: 163

Add following rule to tr and it should work

float: left

Sample (Open it in IE9 offcourse :) ): http://jsfiddle.net/zshmN/

Upvotes: 0

Brian Fisher
Brian Fisher

Reputation: 23989

You could use:

.someclass td {padding-bottom: 20px;}

It's unfortunately not that intuitive but it works on IE6 and all the other browsers. You can also do it with a border:

.someclass td {border-bottom: 20px solid white;}

Edit

To exclude an inner table you could use:

.someclass td td {padding-bottom: 0px;}

Upvotes: 6

Jason Gennaro
Jason Gennaro

Reputation: 34855

If you don't want the border to be too big/thick (with border-spacing), you could use padding on the td.

http://jsfiddle.net/zzJ9Z/

Upvotes: -1

quasistoic
quasistoic

Reputation: 4687

border-spacing is the right way to go, but doesn't fulfill all your requirements.

Still, you could use it in combination with a little browser-detection: if IE < 8, use a little javascript to add some cellspacing.

Upvotes: 2

Related Questions