Space between two rows in a table?

688

88

Is this possible via CSS?

I'm trying

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

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

Marin

Posted 2008-12-08T21:49:59.060

Reputation: 4 708

What is the browser and can you provide a snippet of your code (html/css)? – Patrick Desjardins – 2008-12-08T21:54:51.250

well i'm using ff3 as i know that ie supposedly supports Rules but for now i'm looking to fix in ff3. i tried spacing and padding thus far no luck. productlistingitem is the main table <table class="productListingItem" border="0" cellpadding="10" cellspacing="0"><tr> <tr><td class="dragItem" > – Marin – 2008-12-08T22:31:11.507

1Maybe it is because border-spacing is an attribute related to table and not tr. Try table.classname {border-spacing:5em}.

Note: IE8 supports the border-spacing property if a !DOCTYPE is specified. – Varun Natraaj – 2014-02-14T18:49:58.583

3How come you never accepted an answer to this question? – race_carr – 2015-09-20T02:52:33.347

I use line-height when there are no borders. – Leah – 2017-10-31T08:10:35.780

Answers

484

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

Jan Aagaard

Posted 2008-12-08T21:49:59.060

Reputation: 8 424

1http://code.google.com/p/ie7-js/ adds support to child selector in ie5.5, ie6, ie7 as well – Antony Hatchkins – 2012-01-27T17:16:25.737

361Except this doesn't solve the problem at all when your rows have a background colour and you actually want WHITESPACE between your rows. – Simon East – 2012-02-26T22:49:17.460

6@Simon: Whitespace usually refers to empty space, and not specifically the color white. If you want to colorize the space between the rows, you can try with the CSS <code>border-bottom</code> property on the td-elements. That will probably only render correctly with a 1px border. Another, but not so elegant, solution would be to use an empty row. – Jan Aagaard – 2012-02-27T10:44:41.547

18@Jan: Yeah, exactly my point... It's quite difficult to put transparent empty space between rows. Your solution helps in some instances, but doesn't solve that problem. Inserting an empty table row might work, but it's f'ugly. A bottom-border set to transparent might also work, but I'm not sure how cross-browser-compatible it is. – Simon East – 2012-02-28T06:28:35.753

1

@Simon: Coleman has an ugly, yet working solution to your issue.

– eggy – 2013-04-10T04:28:36.120

One question about this. Why doesn't it work when just applying e.g. style= padding-bottom: 5px directly in the HTML, but only when I put the style in my css? – Magnilex – 2013-08-28T07:50:59.470

@Magnilex. It is possible to add the style directly in html, but I used CSS in my example since you usually want to apply the padding to a whole row of cells, meaning that you would have to repeat the style="padding-bottom: 5px" on each td element. – Jan Aagaard – 2013-08-28T08:58:05.843

Unfortunately this doesn't work well when you are trying to use vertical-align: middle on text. – NetMage – 2013-10-25T18:29:09.343

@Simon I would use a border with the background color. HTML e-mails taught me that dirty trick. – Alex W – 2014-07-16T21:24:24.540

1

@SimonEast I solved that problem of having rows with background using a linear-gradient that has "sharp" stops and uses transparent color at the edges. Sharp linear gradients are described here for example: https://css-tricks.com/css3-gradients/

– rmoestl – 2016-04-27T06:33:20.603

332

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.

user37731

Posted 2008-12-08T21:49:59.060

Reputation: 3 466

5

Yeah, this method would be ideal, except that IE 7 doesn't support it. For browser support, see: http://www.quirksmode.org/css/tables.html

– Simon East – 2012-02-26T22:50:37.460

6Also, it controls the spacing across all rows in the table, you can't set row spacing for individual rows (which is what the OP might be wanting to achieve). – Simon East – 2012-02-26T22:54:38.253

1This is inconsistent between Chrome and Firefox. If you have a thead and tbody, it will render a double border-spacing between those, in Chrome (but a single one in Firefox). – Camilo Martin – 2012-08-28T15:56:40.083

71This is the actual answer, specifically set border-spacing: 0 1em to get your spacing between only rows. – igneosaur – 2014-06-25T11:40:32.917

@igneosaur I tried doing what you said but it still added spacing between all the rows and not just the first two. Can you provide a working jsfiddle? – user3281466 – 2014-08-27T16:05:04.003

@user3281466 Ah, well I've managed to get it to work with separate rows but I had to do something different; it changes the stylings on the table a bit more which may cause other problems. The display:block on the rows breaks the auto-aligning thing that tables do but here is a JSFiddle anyway maybe it solves your problem: http://jsfiddle.net/5dhsrLx3/

– igneosaur – 2014-08-28T11:54:02.530

Cool bro! I don't need to add script in every rows of the table. – Tony Wu – 2014-10-23T11:03:04.763

Don't think about IE support, nobody uses it, nobody will use it and nobody likes it either. – super – 2016-01-02T20:29:49.937

For GridView also Add CellSpacing="-1" GridLines="none" – DreamTeK – 2016-10-14T08:38:33.060

Now that IE7 is basically out of the picture, this solution is perfect! – dmikester1 – 2017-05-03T04:03:57.667

167

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

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

In the css:

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

Pradyut Bhattacharya

Posted 2008-12-08T21:49:59.060

Reputation: 3 223

1this answer works best and needs no dummy separators in DOM – Cubius – 2014-04-28T07:17:03.587

14this worked well for me. the border-spacing's first argument is the horizontal spacing between the cells, and the second is the vertical spacing. – None – 2011-02-26T09:14:00.120

It doesn't always have to by fancy CSS if good old HTML can do the job :) – luator – 2016-07-13T15:38:42.517

Thanks a lot. it's worked for me. – kapil – 2017-02-08T08:36:19.600

122

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.

Coleman

Posted 2008-12-08T21:49:59.060

Reputation: 1 261

Won't work when you use a framework to generate a table.. – Zubzob – 2013-05-31T11:51:15.363

8This reminds me of the 90s, when CSS support was almost non-existent and tables were used for most layout. I'm still giving it +1, though, because the other "answers" are not any better in terms of actually making space between table rows. – labyrinth – 2013-11-28T19:33:42.733

@labyrinth Not much has changed since the 90s. Concerning HTML, it all just has become much more powerful and much more messy. – maaartinus – 2014-06-19T20:10:32.163

2it might work but it is not semantically correct. – pgee70 – 2014-10-30T23:17:10.727

3This is probably more flexible, I would think. You can't always control when in advance you'll need space (dynamically generated pages). – Stefan Kendall – 2010-11-02T17:16:07.373

61

From Mozilla Developer Network:

The border-spacing CSS property specifies the distance between the borders of adjacent cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

That last part is often overseen. Example:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

UPDATE

I now understand that the OP wants specific, seperate rows to have increased spacing. I've added a setup with tbody elements that accomplishes that without ruining the semantics. However, I'm not sure if it is supported on all browsers. I made it in Chrome.

The example below is for showing how you can make it look like the table exists of seperate rows, full blown css sweetness. Also gave the first row more spacing with the tbody setup. Feel free to use!

Support notice: IE8+, Chrome, Firefox, Safari, Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}
<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

Justus Romijn

Posted 2008-12-08T21:49:59.060

Reputation: 11 013

If I wanted some vertivcal space between two particular rows I just added a spacer row <tr><td colspan="2" style="padding-bottom:1em;"></td></tr> – Paul Taylor – 2018-02-07T10:13:47.517

That would work but is semantically incorrect (as in, your seperator row is not an actual row with data like the other rows are. This can be annoying for people using screen-readers or other assistant devices, as well as for indexing purposes and the likes. It might not make a huge difference but it is good to keep it back in your head when developing a website :) – Justus Romijn – 2018-02-07T11:46:38.237

That is true, if he is actually using a table to represent a table. If he is just using a table as a way as a way to display data in a tabular fashion then i would argue it makes more sense to insert a row to represent a gap between two items rather than just adding spacing to either the td elments above or below the line because what the user wants to do is add space between two lines, not increase the size of elements within a line. – Paul Taylor – 2018-02-07T12:02:05.567

52

You may try to add separator row:

html:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

Denis

Posted 2008-12-08T21:49:59.060

Reputation: 2 185

7For IE, tr without a body would not be recognize. add dummy td tag too. – Nap – 2012-02-07T12:41:56.973

The problem is that in HTML5, the W3C validator will emit an error saying " A table row was 0 columns wide, which is less than the column count established by the first row".

– David Grayson – 2015-03-04T23:00:50.803

Nice, I had added another <tr>, <td> and <p> and set the p-tag's visibility to hidden.. Works too. :-) – Jeppe – 2015-09-18T22:45:25.040

47

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.

Robert C. Barth

Posted 2008-12-08T21:49:59.060

Reputation: 15 660

Yep, padding will push the border down, so border-bottom and padding-bottom means that the border will be below the padding. – Dan Dascalescu – 2013-01-17T17:46:24.207

thanks dude.. refreshing html css.. always good – Ramesh_D – 2018-10-20T05:06:45.970

19

You need to set border-collapse: separate; on the table; most browser default stylesheets start at border-collapse: collapse;, which ditches border spacing.

Also, border-spacing: goes on the TD, not the TR.

Try:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

John Haugeland

Posted 2008-12-08T21:49:59.060

Reputation: 5 027

1border-spacing is also for table not td – silversky – 2013-09-04T19:23:34.323

4Thanks. I thanked you in the comment fix previously, but an overzealous editor who wanted to change my style and broke the code in the process also removed my saying thanks. I'm now putting it here where it can't be edited. – John Haugeland – 2014-11-30T19:33:44.593

19

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)

Paul

Posted 2008-12-08T21:49:59.060

Reputation: 4 640

This creates weird vertical-alignment issues, at least in Firefox – cjohansson – 2018-01-05T10:36:43.743

17

You can use line-height in the table:

<table style="width: 400px; line-height:50px;">

alansiqueira27

Posted 2008-12-08T21:49:59.060

Reputation: 3 291

You are correct but The text will also get the line-height which is not good, I think you should see the coleman! He has the nice solution – Waqas – 2015-06-01T05:20:55.207

13

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

Moe

Posted 2008-12-08T21:49:59.060

Reputation: 139

i'd preffer display: inline-block; – DS_web_developer – 2012-01-28T08:00:52.250

Does nothing in IE9. – Stijn – 2011-11-02T15:40:58.847

11

For creating an illusion of spacing between rows, apply background color to row and then create a thick border with white color so that a "space" is created :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

Varun Natraaj

Posted 2008-12-08T21:49:59.060

Reputation: 4 771

11

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

Oguzhan Ozel

Posted 2008-12-08T21:49:59.060

Reputation: 953

That's scary, but it worked. Not in ie7, but cellspacing directly in table works in ie7. – Liko – 2013-01-11T22:59:30.577

floating rows is not a good solution.. especially if your page is larger than 2x the width of the row. add the width attribute to both tags – AndreaCi – 2014-07-15T09:50:29.927

12

That's scary. What this is actually doing is setting the display property to block for the row. This allows the row to have a margin. Vertical margin "Applies to: all elements except those with table display types other than table-caption, table, and inline-table". Since table-row isn't any of those exceptions, then it doesn't count it. You could probably achieve the same effect by doing tr {display:block;} But I would be wary of using either of these methods in a complicated table. It will likely not result in what you expect.

– sholsinger – 2011-03-24T16:46:42.257

10

Take a look at the border-collapse: separate attribute (default) and the border-spacing property.

First, you have to seperate them with border-collapse, then you can define the space between columns and rows with border-spacing .

Both of these CSS properties are actually well-supported on every browser, see here.

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}
<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

Syno

Posted 2008-12-08T21:49:59.060

Reputation: 441

9

The correct way to give spacing for tables is to use cellpadding and cellspacing e.g.

<table cellpadding="4">

Usman Zaheer

Posted 2008-12-08T21:49:59.060

Reputation: 490

5You can do this via CSS, which I'd say it's more "correct" (besides the fact that it's more elegant, moving styling from markup to CSS saves bandwidth). – Camilo Martin – 2012-08-28T14:36:24.630

2It does not save bandwidth. I actually uses more. Assuming you're not adding a stylesheet just for this you need to add a selector and possibly an id or name to this table. That's more bytes not less. – majinnaibu – 2015-05-29T21:42:00.147

9

I stumbled upon this while struggling with a similar issue. I've found Varun Natraaj's answer to be quite helpful, but I would use a transparent border instead.

td { border: 1em solid transparent; }

Transparent borders still have width.

Thoronwen

Posted 2008-12-08T21:49:59.060

Reputation: 324

6

Works for most latest browsers in 2015. Simple solution. It doesn't work for transparent, but unlike Thoronwen's answer, I can't get transparent to render with any size.

    tr {
      border-bottom:5em solid white;
    }

FlavorScape

Posted 2008-12-08T21:49:59.060

Reputation: 4 898

3

Simply put div inside the td and set the following styles of div:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

Nad

Posted 2008-12-08T21:49:59.060

Reputation: 41

2

I realize this is an answer to an old thread and may not be the solution requested, but while all the suggested solutions did not do what I needed, this solution worked for me.

I had 2 table cells, one with background color, the other with a border color. The above solutions remove the border, so the cell on the right would appear to be floating in mid-air. The solution that did the trick was to replace the table, tr and td with divs and corresponding classes: table would be div id="table_replacer", tr would be div class="tr_replacer" and td would be div class="td_replacer" (change closing tags to divs as well obviously)

To get the solution for my problem the css is:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

Hope this helps someone.

bolvo

Posted 2008-12-08T21:49:59.060

Reputation: 106

Imho, this solution is equivalent to using the regular table, tr, td pattern and style tr {display: block;} which I tried. Problem: the table looks different, as the td elements are not rendered to the table width, but float left within the tr. Means, the td elements of all rows are no longer aligned vertically. – Andreas Stankewitz – 2018-03-23T08:43:53.227

0

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.

John Fisher

Posted 2008-12-08T21:49:59.060

Reputation: 18 759

0

Or just add a blank with the height of the margin in between the rows you would like to add the spacing

John Magnolia

Posted 2008-12-08T21:49:59.060

Reputation: 9 093

-1

Here this works smoothly:

#myOwnTable td { padding: 6px 0 6px 0;}

I suppose you could work out a more finely-grained layout by specifying which td if need be.

Brice Coustillas

Posted 2008-12-08T21:49:59.060

Reputation: 538

-5

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

richardh

Posted 2008-12-08T21:49:59.060

Reputation: 11

-15

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

August

Posted 2008-12-08T21:49:59.060

Reputation: 11 577

Does this actually work? I have div.el { display: table-row; margin: 10px; }, and margin doesn't do anything. I know it's a little different than an actual table, but it shouldn't be... – bradlis7 – 2010-06-26T19:36:29.317

20Table rows/cells does not have margins. – Espen – 2011-03-03T08:53:12.097