Spacing Table Rows

[Kingslayer]

Hello,

i have a new Project in which i have to use tables.

Now i was wondering how i can add space before or after a certain table row.

Example:

<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr class=”.gray”>
<td></td>
<td></td>
</tr>
<table>

.gray just adds the background-color:#f1f1f1;

Now i want 10px of space after every tr that has the class .gray

margin or padding won’t work and i dont want to set display:block;

is their a quick workarround to add spacing.

Kind regards and thanks in advance

Fabi

[Paulie_D]

Now i want 10px of space after every tr that has the class gray.

Space where? left, right, top, bottom?

Since this is a table row it’s not clear to me what you are trying to do.

A proper Codepen.io example would be useful.

[Kingslayer]

http://codepen.io/Paulie-D/pen/dFjwx

The space i want is after every gray row. So bottom i guess.

i could use a </br> i guess but that wouldn’t be the right solution.

Hope this makes it a little more clear

Edit: The Codepen is not showing for me it says /anon/CKnLb

MOD EDIT – Forked Pen and added

[Paulie_D]

Your table structure looked a little odd (you had extra tr in there for some reason).

You have to add the padding to the td..if I understand correctly.

http://codepen.io/Paulie-D/pen/wGDxH

[Kingslayer]

What is if i have this case

http://codepen.io/anon/pen/uxdEb

if i use your version i have spacing where i dont want it. That is why i wanted to add it after a whole row.

[Paulie_D]

I’m still not clear on what you want…

Rather than make yet another Codepen..perhaps an image would be of more use.

[Kingslayer]

I want to add extra space like 10 pixels above every row that contains a number. I have a class on those to check if they are filled vaild. So i wanted to add margin or padding top to a <tr> but this does not work. (had to clean the screenshot.)

Edit: maybe it helps to actually add the screenshot -.-
https://dl.dropboxusercontent.com/u/7209323/example.png

[Paulie_D]

Hmmm…I’m pretty sure that this is not going to be a CSS solution. I cannot think of any selector that would do what you are after.

It might be possible with a whole bunch of selectors and/or :notstatements but it would be quite difficult to think of every possible combination.

This would have to be JS/JQ solution I feel.

[Author]

Posts