CSS HTML

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

Is this possible via CSS?

We are trying

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

to no avail.

  • 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.
Css Code
/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */
tr.spaceUnder > td
{
  padding-bottom: 1em;
}

HTML code:

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

+—+—+

In the parent table, try setting

Css Code
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.

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

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

In the css:

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

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:

Html Code
<tr class="spacer"><td></td></tr>

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

See also  CSS - When to use margin vs padding in CSS

You may try to add separator row:

Html:

Html Code
<tr class="separator" />

css:

Css Code
table tr.separator { height: 10px; }

you can do

Css Code
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…

You can use line-height in the table:

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

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

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

Css Code
table tr{
		float: left
		width: 100%;
		}

		tr.classname {
		margin-bottom:5px;
		}

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 .

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

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

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

About the author

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

2 Comments

Click here to post a comment

X