CSS - How to change distance between table cells on users page..see image pls

Question

I am trying to change the look of the users page, I want to show up each cell with dstance to the other, rounded corners, full size hover effect and so on. I dont know how, please see image:

I would want to have it as shown on the rigth sde...

Answer 1

Find the class 

.qa-top-users-spacer around line#1556 in Snow theme and change padding value you want. Something like

.qa-top-users-spacer{
     padding: 0 15px;
}

EDIT:

Sorry I just again missunderstood I thought you might looking space between two column.

Adding space between two row is quite difficlt with this structure but you alwasy can use jQuery to add blank row in between which will add blank space. Drop this into your theme file or somewhere.

$('.qa-top-users-table tr').after('<tr style="height:10px;"><td></td><td></td></tr>');

Comments

No, does not work.

That way I can move the second colum or change the heigth of the row !

And when I have only one column than the class isnt there at all.

Other ideas ? I think somehow the tr must be maipulated, but it does not work either...

---

Check my edited answer

---

Oh, thanks will test it tomorrow, for the moment I rewrote the theme functions ranking....
function ranking($ranking){}
function ranking_spacer($class){}
function ranking_count($item,$class){}
function ranking_label($item,$class){}
function ranking_score($item,$class){}

and threw out all table, tr, td statements and rebuild it as divs, set one mire class and now i can do what i want....
but i want it more lightweight...

---

OK, while playing around i found that
.qa-top-users-table {border-spacing:5px;border-collapse:separate;}
does work well.

.qa-top-users-table {border-spacing:0px 5px;border-collapse:separate;}
.qa-top-users-label {border-radius:3px 0px 0px 3px;}
.qa-top-users-score {border-radius:0px 3px 3px 0px;}

gives us a nice user list with spaces and rounded corners....