I want to create multiple tables but I want to do custom css for specific tables on certain pages. How can i achieve this? What would be my (data-label) for the column headers??
Hi Dylan, Thank you for your interest in wpdatatables.
You can add CSS code in Custom wpDataTables CSS under the "Custom JS AND CSS" in main settings of wpdatatables.
This will be affected on all tables, but if you want just for specific one then insert this code on page where is that table between the style tag.(<style>Code here</style>)
Sorry but I did not quite understand what are you trying to achieve.
Can you please explain me more and send me some example/screenshot/screencast, so I can give you my suggestion.
Every column header have own class that is created based on the name that you insert which start wsith column-. So for example if you make column name like Name, then it will be made class column-name.
And then you can use it in your custom CSS like:
table.wpDataTable thead tr th.column-name {
// your code
}
I want to create multiple tables but I want to do custom css for specific tables on certain pages. How can i achieve this? What would be my (data-label) for the column headers??
@media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
What would be my (data-label) for the column headers??
@media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
What would be my (data-label) for the column headers??
Hi Dylan,
Thank you for your interest in wpdatatables.
You can add CSS code in Custom wpDataTables CSS under the "Custom JS AND CSS" in main settings of wpdatatables.
This will be affected on all tables, but if you want just for specific one then insert this code on page where is that table between the style tag.(<style>Code here</style>)
Sorry but I did not quite understand what are you trying to achieve. Can you please explain me more and send me some example/screenshot/screencast, so I can give you my suggestion.
Best regards.
Kind Regards,
Isidora Markovic
wpDataTables: FAQ | Facebook | Twitter | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Amelia demo sites | Docs
You can try our wpDataTables add-ons before purchase on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables
Hey Milan,
Thanks for the reply. I am wondering what the class would be for the header titles for the tables? what is the data label for the column headers?
Hi Dylan,
Every column header have own class that is created based on the name that you insert which start wsith column-. So for example if you make column name like Name, then it will be made class column-name.
And then you can use it in your custom CSS like:
table.wpDataTable thead tr th.column-name { // your code }Best regards.
Kind Regards,
Isidora Markovic
wpDataTables: FAQ | Facebook | Twitter | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Amelia demo sites | Docs
You can try our wpDataTables add-ons before purchase on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables