How can I make css changes table only visible for table with class X - Support

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

Author

Posts

June 3, 2020 at 12:10 pm #1219022

Hi, I gave the table the class ‘sponsorbedragen’ and I’ve made some changes, but I only want those changes to be visible at the tables with the class ‘sponsorbedragen’. How can I do that? It’s not working everywhere..

td.avia-highlight-col {
font-weight: bold;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #aea04b !important;
}

.main_color .avia-data-table th.avia-highlight-col {
border-color: #ebebeb;
color: #000000;
background-color: #f5f3ed !important;
}

.main_color tr:nth-child(even) {
color: #000000 !important;
}

td, th, tr, .main_color .avia-data-table .avia-highlight-col {
background-color: #f5f3ed;
font-size: 19px;
}

.sponsorbedragen th:first-child {width: 25%;}
.sponsorbedragen th:nth-child(2) {width: 60%;}
.sponsorbedragen th:nth-child(3) {width: 15%;}

.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2 {
letter-spacing: 0px;
}

.sponsorbedragen tr td:first-child {
font-weight: bold;
}

@media only screen and (max-width: 767px) { 
.avia-data-table-wrap.avia_responsive_table td:before {
display: none !important;
}
}

@media only screen and (max-width: 767px) {
.responsive .avia_responsive_table .avia-data-table, 
.responsive div .avia_responsive_table .avia-data-table tbody, 
.responsive div .avia_responsive_table .avia-data-table tr, 
.responsive div .avia_responsive_table .avia-data-table td, 
.responsive div .avia_responsive_table .avia-data-table th {
border: none !important;
}
}

@media only screen and (min-width: 768px) {
.responsive .avia_responsive_table .avia-data-table, 
.responsive div .avia_responsive_table .avia-data-table tbody, 
.responsive div .avia_responsive_table .avia-data-table tr, 
.responsive div .avia_responsive_table .avia-data-table td {
border: none !important;
}
.responsive div .avia_responsive_table .avia-data-table th {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #969696 !important;
}
}

@media only screen and (min-width: 768px) {
.page-id-25 .responsive .avia_responsive_table .avia-data-table, 
.page-id-25 .responsive div .avia_responsive_table .avia-data-table tbody, 
.page-id-25 .responsive div .avia_responsive_table .avia-data-table tr, 
.page-id-25 .responsive div .avia_responsive_table .avia-data-table td {
border: 1px solid #969696 !important;
}
.page-id-25 .responsive div .avia_responsive_table .avia-data-table th {
border: 1px solid #969696 !important;
}
}

@media only screen and (max-width: 767px) {
td {
padding: 0px;
}
td.avia-highlight-col {
padding-bottom: 20px !important;
}
}

tr.avia-heading-row {
border-bottom: 1px solid #000000 !important;
}

thanks!

June 3, 2020 at 5:30 pm #1219170

Jordan Shannon

Inactive Moderator

Hey jannnnnneke,

Please provide a link to the site/page in question so we can look into this issue further. Link us to the page where you have this table.

Best regards,
Jordan Shannon

June 3, 2020 at 10:41 pm #1219255

jannnnnneke

Participant

Oh sorry, thought I did! See private data!

June 4, 2020 at 6:50 pm #1219496

Jordan Shannon

Inactive Moderator

Hi,

Adjusted the css a bit. Please test:

.sponsorbedragen td.avia-highlight-col {
font-weight: bold;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #aea04b !important;
}

.main_color .avia-data-table.sponsorbedragen  th.avia-highlight-col {
border-color: #ebebeb;
color: #000000;
background-color: #f5f3ed !important;
}

.main_color .sponsorbedragen tr:nth-child(even) {
color: #000000 !important;
}

td, th, tr, .main_color .sponsorbedragen.avia-data-table .avia-highlight-col {
background-color: #f5f3ed;
font-size: 19px;
}

.sponsorbedragen th:first-child {width: 25%;}
.sponsorbedragen th:nth-child(2) {width: 60%;}
.sponsorbedragen th:nth-child(3) {width: 15%;}

.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2 {
letter-spacing: 0px;
}

.sponsorbedragen tr td:first-child {
font-weight: bold;
}

@media only screen and (max-width: 767px) { 
.avia-data-table-wrap.avia_responsive_table td:before {
display: none !important;
}
}

@media only screen and (max-width: 767px) {
.responsive .avia_responsive_table .avia-data-table, 
.responsive div .avia_responsive_table .avia-data-table tbody, 
.responsive div .avia_responsive_table .avia-data-table tr, 
.responsive div .avia_responsive_table .avia-data-table td, 
.responsive div .avia_responsive_table .avia-data-table th {
border: none !important;
}
}

@media only screen and (min-width: 768px) {
.responsive .avia_responsive_table .avia-data-table,
.responsive div .avia_responsive_table .avia-data-table tbody,
.responsive div .avia_responsive_table .avia-data-table tr,
.responsive div .avia_responsive_table .avia-data-table td {
border: none !important;
}
.responsive div .avia_responsive_table .avia-data-table th {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #969696 !important;
}
}

@media only screen and (min-width: 768px) {
.page-id-25 .responsive .avia_responsive_table .avia-data-table,
.page-id-25 .responsive div .avia_responsive_table .avia-data-table tbody,
.page-id-25 .responsive div .avia_responsive_table .avia-data-table tr,
.page-id-25 .responsive div .avia_responsive_table .avia-data-table td {
border: 1px solid #969696 !important;
}
.page-id-25 .responsive div .avia_responsive_table .avia-data-table th {
border: 1px solid #969696 !important;
}
}

@media only screen and (max-width: 767px) {
td {
padding: 0px;
}
td.avia-highlight-col {
padding-bottom: 20px !important;
}
}

tr.avia-heading-row {
border-bottom: 1px solid #000000 !important;
}

Best regards,
Jordan Shannon

June 9, 2020 at 5:06 pm #1220902

jannnnnneke

Participant

Thanks! But how can I make this code only for tables with class sponsorbedragen? On normal tables I do want to have a border.

@media only screen and (min-width: 768px) {
.responsive .avia_responsive_table .avia-data-table,
.responsive div .avia_responsive_table .avia-data-table tbody,
.responsive div .avia_responsive_table .avia-data-table tr,
.responsive div .avia_responsive_table .avia-data-table td {
border: none !important;
}
.responsive div .avia_responsive_table .avia-data-table th {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #969696 !important;
}
}

June 9, 2020 at 5:13 pm #1220903

jannnnnneke

Participant

BTW, the only thing that now has changed is the color of the even rows. I cleared cache.. so its not all working. Do you understand what I’m trying to do? So I want all this to be working for ONLY tables with class=”sponsorbedragen”:

td.avia-highlight-col {
font-weight: bold;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #aea04b !important;
}

.main_color .avia-data-table th.avia-highlight-col {
border-color: #ebebeb;
color: #000000;
background-color: #f5f3ed !important;
}

td, th, tr, .main_color .avia-data-table .avia-highlight-col {
background-color: #f5f3ed;
font-size: 19px;
}

.sponsorbedragen tr td:first-child {
font-weight: bold;
}

@media only screen and (max-width: 767px) { 
.avia-data-table-wrap.avia_responsive_table td:before {
display: none !important;
}
}

@media only screen and (max-width: 767px) {
.responsive .avia_responsive_table .avia-data-table, 
.responsive div .avia_responsive_table .avia-data-table tbody, 
.responsive div .avia_responsive_table .avia-data-table tr, 
.responsive div .avia_responsive_table .avia-data-table td, 
.responsive div .avia_responsive_table .avia-data-table th {
border: none !important;
}
}

@media only screen and (min-width: 768px) {
.responsive .avia_responsive_table .avia-data-table, 
.responsive div .avia_responsive_table .avia-data-table tbody, 
.responsive div .avia_responsive_table .avia-data-table tr, 
.responsive div .avia_responsive_table .avia-data-table td {
border: none !important;
}
.responsive div .avia_responsive_table .avia-data-table th {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #969696 !important;
}
}

@media only screen and (max-width: 767px) {
td {
padding: 0px;
}
td.avia-highlight-col {
padding-bottom: 20px !important;
}
}

tr.avia-heading-row {
border-bottom: 1px solid #000000 !important;
}

This reply was modified 4 years, 6 months ago by jannnnnneke.

June 10, 2020 at 8:57 am #1221101

jannnnnneke

Participant

Here are login details if you want to have a look! Thnx :)

June 15, 2020 at 4:43 am #1222544

Mike

Moderator

Hi,
Sorry for the late reply and thanks for the login, I found your css in your Quick CSS, but it was not modified for sponsorbedragen so I made the changes and moved your css to the WordPress > Customize > Additional CSS just until we are sure it’s working correctly.
Please clear your browser cache and check.

Best regards,
Mike

Author

Posts

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

You must be logged in to reply to this topic.