[Solved – 11 Answers] CSS – HTML – Space between two rows in a table

PROBLEM :

Is this possible via CSS?

We are trying

[pastacode lang=”css” manual=”tr.classname%20%7B%0A%20%20border-spacing%3A%205em%3B%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

to no avail.

SOLUTION 1

• 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.) it shouldn’t break the code in any modern browsers.

[pastacode lang=”css” manual=”%2F*%20Apply%20padding%20to%20td%20elements%20that%20are%20direct%20children%20of%20the%20tr%20elements%20with%20class%20spaceUnder.%20*%2F%0Atr.spaceUnder%20%3E%20td%0A%7B%0A%20%20padding-bottom%3A%201em%3B%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

HTML code:

[pastacode lang=”markup” manual=”%3Ctable%3E%0A%20%20%09%09%3Ctbody%3E%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%09%09%3Ctd%3EA%3C%2Ftd%3E%0A%20%20%20%20%20%20%09%09%3Ctd%3EB%3C%2Ftd%3E%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%09%09%3Ctr%20class%3D%22spaceUnder%22%3E%0A%20%20%20%20%20%20%09%09%3Ctd%3EC%3C%2Ftd%3E%0A%20%20%20%20%20%20%09%09%3Ctd%3ED%3C%2Ftd%3E%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%09%09%3Ctr%3E%0A%20%20%20%20%20%20%09%09%3Ctd%3EE%3C%2Ftd%3E%0A%20%20%20%20%20%20%09%09%3Ctd%3EF%3C%2Ftd%3E%20%20%20%20%3C%2Ftr%3E%20%20%3C%2Ftbody%3E%3C%2Ftable%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

This should render somewhat like this:

+—+—+

| A | B |

+—+—+

| C | D |

|    |     |

+—+—+

| E | F |

+—+—+

SOLUTION 2

In the parent table, try setting

[pastacode lang=”css” manual=”border-collapse%3Aseparate%3B%20%0Aborder-spacing%3A5em%3B%0A” message=”Css Code” highlight=”” provider=”manual”/]

Plus a border declaration, and see if this achieves your desired effect. Beware, though, that IE doesn’t support the “separated borders” model.

SOLUTION 3

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

[pastacode lang=”markup” manual=”%3Ctable%20id%3D%22albums%22%20cellspacing%3D%220%22%3E%20%20%20%20%20%20%20%0A%3C%2Ftable%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

In the css:

[pastacode lang=”css” manual=”table%23albums%20%0A%7B%0A%20%20%20%20border-collapse%3Aseparate%3B%0A%20%20%20%20border-spacing%3A0%205px%3B%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 4

since we have a background image behind the table, faking it with white padding wouldn’t work.

we opted to put an empty row in-between each row of content:

[pastacode lang=”markup” manual=”%3Ctr%20class%3D%22spacer%22%3E%3Ctd%3E%3C%2Ftd%3E%3C%2Ftr%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

Then use css to give the spacer rows a certain height and transparent background.

SOLUTION 5

You may try to add separator row:

Html:

[pastacode lang=”markup” manual=”%3Ctr%20class%3D%22separator%22%20%2F%3E” message=”Html Code” highlight=”” provider=”manual”/]

css:

[pastacode lang=”css” manual=”table%20tr.separator%20%7B%20height%3A%2010px%3B%20%7D” message=”Css Code” highlight=”” provider=”manual”/]

SOLUTION 6

you can do

[pastacode lang=”css” manual=”tr.classname%20td%20%0A%7B%0Abackground-color%3Ared%3B%20%0Aborder-bottom%3A%205em%20solid%20white%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/] [ad type=”banner”]

Make sure the background color is set on the td rather than the row. This should work across most browsers…

SOLUTION 7

You can use line-height in the table:

[pastacode lang=”markup” manual=”%3Ctable%20style%3D%22width%3A%20400px%3B%20line-height%3A50px%3B%22%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

SOLUTION 8

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:

[pastacode lang=”markup” manual=”%3Chtml%3E%3Chead%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%09%23ex%20%20%20%20%7B%20border-collapse%3A%20separate%3B%20%7D%0A%20%20%20%20%09%23ex%20td%20%7B%20border-spacing%3A%201em%3B%20%7D%0A%09%3C%2Fstyle%3E%3C%2Fhead%3E%3Cbody%3E%0A%20%20%20%20%09%20%3Ctable%20id%3D%22ex%22%3E%0A%09%3Ctr%3E%3Ctd%3EA%3C%2Ftd%3E%0A%09%3Ctd%3EB%3C%2Ftd%3E%3C%2Ftr%3E%0A%09%3Ctr%3E%3Ctd%3EC%3C%2Ftd%3E%0A%09%3Ctd%3ED%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%0A%09%3C%2Fbody%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

SOLUTION 9

If you apply float to tr elements, you can space between two rows with margin attribute.

[pastacode lang=”css” manual=”table%20tr%7B%0A%09%09float%3A%20left%0A%09%09width%3A%20100%25%3B%0A%09%09%7D%0A%0A%09%09tr.classname%20%7B%0A%09%09margin-bottom%3A5px%3B%0A%09%09%7D%0A” message=”Css Code” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 10

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 .

[pastacode lang=”css” manual=”tr%20%0A%09%09%7B%0A%20%20%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23FFD700%3B%0A%20%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border%3A%2010px%20solid%20white%3B%0A%09%09%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

SOLUTION 11

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

[pastacode lang=”css” manual=”margin-bottom%3A%2020px%3B%0A%09%09height%3A%2040px%3B%0A%09%09float%3A%20left%3B%0A%09%09width%3A%20100%25%3B%0A” message=”Css Code” highlight=”” provider=”manual”/]