• support@answerspoint.com

Space between two rows in a table?

454

Is this possible via CSS?

I'm trying

tr.classname {border-spacing:5em}

to no avail. Maybe I'm doing something wrong ?

3Answer


0

You need to use padding on your td elements. Something like this should do the trick. You can, of course, get the same result using a top padding instead of a bottom padding.

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.

/* Apply padding to td elements that are direct children of the tr element. */
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 |
+---+---+
  • answered 2 years ago
  • G John

0

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.

 
  • answered 2 years ago
  • Sunny Solu

0

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.

  • answered 2 years ago
  • Sunny Solu

Your Answer

    Facebook Share