Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Space between two rows in a table?

Tags:

html

css

Is this possible via CSS?

I'm trying

tr.classname {   border-spacing: 5em; } 

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

like image 229
Marin Avatar asked Dec 08 '08 21:12

Marin


People also ask

What is the spacing between rows?

Row spacing (along with seeding rate) determines the crop arrangement in a field, altering how fast the crop canopy closes (leaves from adjoining rows begin overlapping) and the ways in which weeds grow between crop rows.

How do I reduce the space between two rows in HTML table?

The space between the table cells is controlled by the CELLSPACING attribute in the TABLE tag. By setting CELLSPACING to zero, you can remove all the space between the cells of your table. This removes all the space between the cells of our table (see Figure 9). Figure 9 Our example with CELLSPACING=0.


1 Answers

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.

In the CSS code below, 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 elements with class spaceUnder. */    tr.spaceUnder>td {    padding-bottom: 1em;  }
<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 | +---+---+ 
like image 125
Jan Aagaard Avatar answered Oct 03 '22 08:10

Jan Aagaard