Change color in table cell - Support | Kriesi.at

Tagged: enfold color cell table

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
April 5, 2024 at 5:51 pm #1439294

cuccarini
Participant

Hello,

I hope everything goes well there, I would need to format a table similar to the example in the link: https://app.box.com/s/ogay00vgin75ju69a2lsmcxq7k83lfxy

The current table is the following: https://www.alfieridellatuscia.it/#attivita

The essential problems to be solved are:
– space the cells as shown in the example
– change the cell background color
– make the cells appear even if they are empty, that’s why I highlighted the flag in the table, but whitout the result

Thanks in advance for your support
Andrea

April 6, 2024 at 3:57 pm #1439323
Mike
Moderator
Hey cuccarini,
Thank you for the link to your site and your screenshot, you are using the pricing table on your site, try using the tabular data instead.
I created a test page with the tabular data and I made the table background color transparent so the color section Background Gradient would show instead of filling the empty cells with a red background color. This is how I filled the table:

I then added the custom class club-table

Then I used this css:
```
.main_color table.club-table {
    border-collapse: separate;
    border-spacing: 10px;
    background: transparent;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.main_color table.club-table td,
.main_color table.club-table th {
	border: 2px solid #fff;
    padding: 5px;
    background: transparent;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    height: 120px;
    vertical-align: middle;
    text-align: center;
}
.main_color table.club-table tr {
    border: 2px solid #fff;
    background: transparent;
}
tr:first-child th, tr:first-child td,
tr th:first-child, tr td:first-child {
	border: 2px solid #fff;
}
table.club-table > tbody > tr:nth-child(2) > td:nth-child(1),
table.club-table > tbody > tr:nth-child(3) > td:nth-child(1) {
	background-color: #1e90ff;
}
table.club-table > tbody > tr:nth-child(3) > td:nth-child(2) {
	background-color: #808080;
}
table.club-table > tbody > tr:nth-child(2) > td:nth-child(3) {
	background-color: #808080;
}
table.club-table > tbody > tr:nth-child(3) > td:nth-child(3) {
	background-color: #ee711f;
}
table.club-table > tbody > tr:nth-child(3) > td:nth-child(5) {
	background-color: #29a715;
}
```
This is the result:

Please give this a try.

Best regards,
Mike
April 6, 2024 at 5:34 pm #1439328

cuccarini
Participant

Hello Mike,

the result of your link https://enfold.savvyify.com/club-table/ was exellent, so I followed your instructions and inserted the CSS in General Styling quick CSS nad I added the club-table CSS class in the right place.
Unfortunately, as you can see here https://www.alfieridellatuscia.it/, the result was not the same … I also tried to make some instruction is important but this was also not successful. Seems to me that some CSS directives are not taken into consideration because they are overlaid by some other directive. What can I do now?

Thanks in advance
Andrea

April 6, 2024 at 6:38 pm #1439337

Mike
Moderator

Hi,
It looks like you are using the pricing table on your site, try using the tabular data instead.

Best regards,
Mike

April 6, 2024 at 6:54 pm #1439343

cuccarini
Participant

Hello Mike,

in the meantime I found the solution to use the base background instead of transparent, which for some strange reason doesn’t work
Now the result is perfect! Thanks for your help, please close the ticket.

kind regards
Andrew

April 6, 2024 at 7:05 pm #1439345

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Change color in table cell’ is closed to new replies.