Is this possible via CSS?
I'm trying
tr.classname { border-spacing: 5em; }
to no avail. Maybe I'm doing something wrong?
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.
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.
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 | +---+---+
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With