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?

Jan_Aagaard_37147 · Answer

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;
}

This should render somewhat like this:

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

user_37731 · Answer

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.

Robert_C_Barth_9209 · Answer

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.

user_590816 · Answer

tr { 
    display: block;
    margin-bottom: 5px;
}

user_241921 · Answer

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;
}

user_12655362 · Answer

table { border-collapse: separate; border-spacing: 0 1em; }

user_1942546 · Answer

Best way is to add with a height attribute:

You can read more about colspan here.

In the following example, our table is green and our td with the height attribute is yellow:

user_50358 · Answer

You can fill the elements with

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 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

s inside the s, you can use jQuery (or something similar) to dynamically wrap the contents in a

, enabling you to apply the CSS as desired.

user_904156 · Answer

The appearance of a row gap can be achieved by using a bottom border on the cells where there should be the next gap, i.e. border-bottom:solid white 5px;

Here is the code to create the screenshot:




Group Item Row
G-1 a1 1
G-2 b1 2
G-2 b2 3
G-2 b3 4
G-3 c1 5
G-3 c2 6

user_14631246 · Answer

.table {
 border-collapse: separate; 
 border-spacing: 0 1rem;
}

This works well for me to give a vertical margin/spacing between tables. Reference: https://www.w3docs.com/snippets/css/how-to-create-space-between-rows-in-the-table.html

user_2963652 · Answer

Modern solution involving `display:grid` with `grid-gap`.

A modern solution to create a table would be using CSS grid or flexbox.

To add space between rows and columns, one can use grid-gap: [vertical] [horizontal].

To prevent "too thick / double border" with zero grid-gap, one can add margin: -1px to the cell styling. Worth noticing: you will need this hack only if you have both borders and grid-gap of zero.

my-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px 0px;
}

my-item {
  border: 2px solid #c60965;
  background: #ffc000;
  color: #c60965;
  margin: -1px;
  
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

}

Space between columns is achieved in the same way. For example, 20px space between columns and 10px space between rows is done with this syntax: grid-gap: 10px 20px;.

Space inside rows / columns is achieved with paddings.

Tweakable demo

Below is an interactive demo, where you can tweak grid-gap, padding and turn on/off margin hack to see what changes.

Bonus: at the bottom you can find what code to insert for such behavior (regarding grid-gap, padding and margin hack)

 Cell number one Cell number two Cell number three Cell number four Cell number fiveSpace between rows:Space between cols:Padding (rows)Padding (cols):Margin hack:  onCode to implement this:

user_7312335 · Answer

you can do something like on your table :

table {
  border-collapse: separate;
  border-spacing: 0 15px;
}

table selective: as it will select all tables, so if you want to select single table you can do likewise

For the above html you can do like this, note that for specific table if you want then you can use the below approach.

.res {
      border-collapse: separate;
      border-spacing: 0 15px;
    }

Reference:https://www.w3docs.com/snippets/css/how-to-create-space-between-rows-in-the-table.html

user_999120 · Answer

Here's a simple and elegant solution, with a few caveats:

You can't actually make the gaps transparent, you need to give them a specific color.
You can't round the corners of the borders above & below the gaps
You need to know the padding and borders of your table cells

With that in mind, try this:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

What you're actually doing is sticking a rectangular ::before block into the top of all the cells in the row you want preceded by a gap. These blocks stick out of the cells a bit to overlap the existing borders, hiding them. These blocks are just a top and bottom border sandwiched together: The top border forms the gap, and the bottom border re-creates the appearance of the cells' original top border.

Note that if you have a border around the table itself as well as the cells, you'll need to further increase the horizontal -ve margin of of your 'blocks'. So for a 4px table border, you'd instead use:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

And if your table uses border-collapse:separate instead of border-collapse:collapse, then you'll need to (a) use the full table border width:

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... and also (b) replace the double-width of border that now needs to appear below the gap:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

The technique is easily adapted to a .gapafter version, if you prefer, or to creating vertical (column) gaps instead of row gaps.

Here's a codepen where you can see it in action: https://codepen.io/anon/pen/agqPpW

user_568192 · Answer

doing this shown above...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; }

removes vertical column alignment so be careful how you use it

August_30966 · Answer

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; }

Space between two rows in a table?

30 Answers

Modern solution involving display:grid with grid-gap.

Tweakable demo

Modern solution involving `display:grid` with `grid-gap`.