Space between two rows in a table?

Question

Is this possible via CSS? I'm trying tr.classname {border-spacing:5em} to no avail. Maybe I'm doing something wrong ?

Answer 1

In the parent table, try setting

border-collapse:separate; 
border-spacing:5em;

Plus a border declaration, and see if this achieves your desired effect. Beware, though, that IE doesn't support the "separated borders" model.

Answer 2

Have you tried:

tr.classname { margin-bottom:5em; }

Alternatively, each td can be adjusted as well:

td.classname { margin-bottom:5em; }

or

 td.classname { padding-bottom:5em; }

Answer 3

You can't change the margin of a table cell. But you CAN change the padding. Change the padding of the TD, which will make the cell larger and push the text away from the side with the increased padding. If you have border lines, however, it still won't be exactly what you want.

Answer 4

You need to use padding on your td elements. Something like this should do the trick.

CSS code. The greater than sign means that the padding is only applied to td elements that are direct children to tr elements with the class spaceUnder. This will make it possible to use nested tables. (Cell C and D in the example code.) I'm not too sure about browser support for the direct child selector (think IE 6), but it shouldn't break the code in any modern browsers.

tr.spaceUnder > td
{
  padding-bottom: 1em;
}

HTML code:

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

This should render somewhat like this:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

Answer 5

You can fill the <td/> elements with <div/> elements, and apply any margin to those divs that you like. For a visual space between the rows, you can use a repeating background image on the <tr/> element. (This was the solution I just used today, and it appears to work in both IE6 and FireFox 3, though I didn't test it any further.)

Also, if you're averse to modifying your server code to put <div/>s inside the <td/>s, you can use jQuery (or something similar) to dynamically wrap the <td/> contents in a <div/>, enabling you to apply the CSS as desired.

Answer 6

A too late answer :)

If you apply float to tr elements, you can space between two rows with margin attribute.

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

Answer 7

Ok, you can do

tr.classname td {background-color:red; border-bottom: 5em solid white}

Make sure the background color is set on the td rather than the row. This should work across most browsers... (Chrome, ie & ff tested)

Answer 8

since I have a background image behind the table, faking it with white padding wouldn't work. I opted to put an empty row in-between each row of content:

<tr class="spacer"><td></td></tr>

then use css to give the spacer rows a certain height and transparent background.

Answer 9

You have table with id albums with any data...I have omitted the trs and tds

<table id="albums" cellspacing="0px">

</table>

In the css

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}