CODEWITHSUNDEEP
htmlcss
Elomar Adam
Elomar Adam

Reputation: 251

Color the space between tr's

I'm trying to give a color to the space between the rows.
This is the result:
http://gyazo.com/88b855df698f55d1e8c7350a31f4d51b enter image description here

What I have done is the following: 

#PersSchemaTable td:nth-child(1),
#PersSchemaTable td:nth-child(3), 
#PersSchemaTable td:nth-child(5), 
#PersSchemaTable td:nth-child(7), 
#PersSchemaTable td:nth-child(9), 
#PersSchemaTable td:nth-child(11),
#PersSchemaTable td:nth-child(13) {
    border-right: 2px solid #781351;
}

As you can see there is still spacing between each row. Btw the table is made in php.
How can I color the space between the rows too?

Upvotes: 1

Views: 87

Answers (2)

Shaggy
Shaggy

Reputation: 6796

Set the position of your cells to relative and then use an absolutely positioned pseudo element.

Here's a very rough example, assuming a 5px gap between your cells:

td{
    position:relative;
}
td:nth-child(2n-1)::after{
    background:red;
    bottom:-5px;
    content:"";
    display:block;
    position:absolute;
    right:-2px;
    top:-5px;
    width:2px;
}

Upvotes: 1

DrCord
DrCord

Reputation: 3955

Give the entire table a background color and then assign each <td> the background color you want them to be.

Upvotes: 6

Related Questions