CSS: how to create a gap between rows in a table?

Question

The value is that the resulting table looks something like this:

 [=== ROW ===]
 [=== ROW ===]
 [=== ROW ===]
 [=== ROW ===]

... and more than that:

 [=== ROW ===]

 [=== ROW ===]

 [=== ROW ===]

 [=== ROW ===]

I tried adding

margin-bottom:1em; 

both td and tr , but received nothing. Any ideas?

Answer 1

 table { border-collapse: collapse; } td { padding-top: .5em; padding-bottom: .5em; } 

Cells will not respond to anything unless you first crash. You can also add borders to TR elements after they are set (by the way.)

If this is for layout, I will move on to using DIV and more modern layout methods, but if this is tabular data, knock yourself out. I am still actively using tables in my web applications for data.

Answer 2

Anything you need:

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

This assumes that you need vertical clearance 1 and horizontal clearance. If you do this, you should probably also look at line height control.

It seems strange that some of the answers that people gave suggested crash-crash: a crash whose effect is the exact opposite of what the question asked.

Answer 3

If you do not have borders or you have borders and you want the distance inside the cells, you can use padding or line-height . As far as I know, margin does not affect cells and rows.
The CSS property for the cell border-spacing , but it doesn't work on IE6 / 7 (so you can use it depending on your crowd).

If all else fails, you can use the old cellspacing attribute in your markup, but it will also give you the distance between the columns. Some CSS reset suggest you install it anyway to get cross-browser support:

Tables

/ * still need cellspacing="0" in the markup * /

Answer 4

If none of the other answers are satisfactory, you can always simply create an empty string and style it appropriately with CSS.

Answer 5

You can simply use padding-top and padding-bottom for the td element.

A block may be something from this list:

Demo code:

 td { padding-top: 10px; padding-bottom: 10px; } 

 <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> 

Answer 6

In my opinion, the easiest way is to add an addition to the tag.

 td { padding: 10px 0 } 

Hope this helps you! Cheer up!

Answer 7

This is the way (I thought it was impossible):

First, set only the vertical border spacing for the table (for example, 5 pixels) and set the horizontal border spacing for it to 0. Then you must set the correct borders for each cell in the row. For example, the rightmost cell in each row should have a border at the top, bottom, and right. The leftmost cells must have a border above, below, and to the left. And the rest of the cells between the two should have a border only above and below. Like this example:

 <table style="border-spacing:0 5px; color:black"> <tr> <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td> <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td> <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td> <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td> <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td> </tr> <tr> <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td> <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td> <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td> <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td> <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td> </tr> <tr> <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td> <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td> <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td> <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td> <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td> </tr> </table> 

Answer 8

laying in TD works if you want the space to have the same background color as td

in my case the requirement was for a space between the title bar and what was above it

Applying this style to one cell, I was able to get the desired separation. It was not necessary to add it to all cells ... Perhaps not the BRIDGE is elegant, but perhaps more elegant than the separator lines.

 <td colspan="10"> <div class="HeaderRow" style="margin-top:10px;"> <%# Eval("VendorName")%> </div> </td> 

Answer 9

If you stick to the design using tables, the best idea is to give an empty row without content and a given height between each row in the table.

You can use div to avoid this complexity. Just give the difference for each div.

Answer 10

You can also just change the height for each row using CSS.

 <head> <style> tr { height:40px; } </style> </head> <body> <table> <tr> <td>One</td> <td>Two</td> </tr> <tr> <td>Three</td> <td>Four</td> </tr> <tr> <td>Five</td> <td>Six</td> </tr> </table> </body> 

You can also change the height of the <td> element, it should give you the same result.

Answer 11

 tr { padding-top: 10px; padding-bottom:10px; } 

Answer 12

Add the following rule to tr and it should work

 float: left 

Example (open it in IE9 offcourse :)): http://jsfiddle.net/zshmN/

EDIT: This is not a legitimate or correct solution that many have talked about, but if you don’t have an option and need something, then this will work in IE9.

So, all those who vote, also let us know the right solution.