Tables with background colors

Support
#1

i created a table in a text element


<table class="hours-table">
<tbody>
<tr>
<td>Monday</td>
<td>
<p>8:30 am to 4:30 pm</p>
</td>
</tr>
<tr>
<td>Tuesday</td>
<td>1:00 pm to 8:00 pm</td>
</tr>
<tr>
<td>Wednesday</td>
<td>
<p>9:00 am to 5:00 pm</p>
</td>
</tr>
<tr>
<td>Thursday</td>
<td>10:00 am to 6:00 pm</td>
</tr>
<tr >
<td>Friday</td>
<td>
<p>8:00 am to 2:00 pm</p>
</td>
</tr>
</tbody>
</table>

But i want my table to look like this,

i tried giving bg color to the alternative rows, but its not showing any updates on the site, but if i use the same code in some other editor its working fine. How can i achieve this, you have any suggestions?

#2

Hi Grant,

Please add this code in X > Theme Options > CSS:

.hours-table tr:nth-child(even) {background: #CCC}
.hours-table tr:nth-child(odd) {background: #FFF}

Here is a link to read more about this solution: https://www.w3.org/Style/Examples/007/evenodd.en.html

Hope this helps.

#3

that didnt worked, something is wrong there, i cannot find it, even i tried some different ways too.

#5

Hi Grant,

Would you mind providing the URL of the site in question? I have checked your licenses page but there are several licenses in your account.

Thank you.

#6

tabbara1905.wpengine.com

#7

Hello Grant,

I did some further checking, the reason why the table does not get the alternate background color is that the CSS code you are using is adding the background colors to the tr elements. That works fine but does not appear because there is a default theme style for td that sets the background color of the table cells to white which displays as it is on top of the table row.

To solve this, you may still use the code that was previously provided but also add this:


.hours-table td {
    background-color: transparent;
}

Here are some related links for further reading:

Hope this helps.

#8

Thanks that worked.

#9

Glad to hear it’s sorted.

Have a nice week ahead!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.