Hi - I'm struggling with a table on www.roberttearle.com/index.php?option=com_content&view=article&id=150

It's picking up zebra stripes from custom.css and I want to change the colour of the stripes.

I've set up a new class for this table - wptable - But I can't see how to override the earlier css.

Has anyone any ideas?

Thanks

Ian

Hi Ian,

You have this style

tbody tr:nth-child(odd) {
background-color: #087e80;
}

Which adds colour to odd row with the even row left as default

I'd also adjust the styling as you the thead corners showing over the top of the border radius

Cheers

Hi Paul - thanks for getting back to me.

I'm aware off this

tbody tr:nth-child(odd) {
background-color: #087e80;
}

I can't make my class .wptable overwrite it. Probably I can't get the syntax right..

The square/rounded corners at the top are also doing my head in (not a good day today). Presumably I have to add inline commands to top left and right headers to have top left and right rounded corners.

It's been a lovely day today and I wanted to mow the lawn. Instead I've been inside getting it wrong

There we go...

Thanks again

Ian

Hi Ian,

I ended up with this snippet

.wptable
{
border-collapse: collapse;
width: 100%;
border:1px solid #097380;
font-family: Arial, Helvetica, sans-serif;
}

.wptable th {color:white;}

.wptable th, td {
padding: 10px;
text-align: left;
}


table {border: solid 1px #000;border-radius:10px;border-collapse: initial;}

.wptable thead th {background:#715d5d;}

.wptable thead th:first-child {border-radius: 10px 0 0 0;}

.wptable thead th:last-child { border-radius: 0 10px 0 0;}

tbody tr:nth-child(odd) {background-color: #087e80;}

.wptable { border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; }

.wptable th {color:white;}

.wptable th, td {padding: 10px; text-align: left;}

.wptable tr td {border-radius:0 !important;}

I pasted above below this line

body #logowrap .zen-container
{
background:rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
}

Regarding

tbody tr:nth-child(odd) {background-color: #087e80;}

You could add something like

.wptable tbody tr:nth-child(odd) {background-color: #52a9ab;}

Replacing your background colour as required

Hi Paul

Many thanks for this - All sorted now

I was not having a good day yesterday!

Thanks again for excellent support - as always!

Best wishes

Ian

No problem

Cheers
Paul

The lines

.wptable thead th:first-child {border-radius: 10px 0 0 0;}

.wptable thead th:last-child { border-radius: 0 10px 0 0;}

control the border-radius of the head


first-child is the first th and had top left border radius

last-child is the last with top right border radius

while the second th doesn't have any border radius

Just thought I'd add an explanation for any other member following the thread

Tables can be tricky

Unfortunately it's what the client wants.

I did find a tutorial on creating css tables but I can't remember where, and I was running out of time...

Thanks for all the help on this,

Ian

Yep clients

Hi Paul - sorry to trouble again with this one.

The client threw it all out and wants it different - including a shadow round the table.

I can't get the shadow to show at the bottom of the table, and I've had to specify a width of 99% to get it to show at the side.

I think it might be to do with the element needing display:block, which breaks the table.

Is there a work around?

Thanks

Ian

Ah. I've changed something and it's worked. God IS on my side!

Thanks

ian

Thanks for the update Ian

Have a great weekend

Cheers
Paul