Comments 4DFSKarma started the conversationMay 26, 2020 at 11:17pmWe currently have a master CSS set up (displayed below), as 95% of our DataTables need the same format. However, we have a handful of tables that we'd like to manually edit the font sizing for (to make it larger). How do we go about this exactly?.wpDataTablesWrapper table.wpDataTable td, .wpDataTablesWrapper table.wpDataTable th,.wpDataTablesWrapper table.wpDataTable td.numdata, .wpDataTablesWrapper table.wpDataTable th.numdata{ text-align: center !important; } .wpDataTablesWrapper table.wpDataTable th {line-height: 20px; font-size: 8px !important;} .wpDataTablesWrapper table.wpDataTable td {line-height: 10px; font-size: 9px !important;} div.container { overflow: scroll;} thead th { position: -webkit-sticky; /* for Safari */ position: sticky; top: 0;} tbody td:first-child { position: -webkit-sticky; /* for Safari */ position: sticky; left: 0;} thead th:first-child { left: 0; z-index: 1;} tbody td:first-child { left: 0; z-index: 1;} 2,572Aleksandar repliedMay 28, 2020 at 8:07amHello DFSKarmaYou can add custom CSS to the columns you want to apply these changes.For example, add the class "customFont" to a column. Then, you can add new custom CSS, like: table.wpDataTable .customFont { font-size: 20px !important; color: green !important; }Kind Regards, Aleksandar Vuković[email protected] Rate my support wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community You can try wpDataTables add-ons before purchasing on these sandbox sites: Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables Sign in to reply ...
We currently have a master CSS set up (displayed below), as 95% of our DataTables need the same format. However, we have a handful of tables that we'd like to manually edit the font sizing for (to make it larger). How do we go about this exactly?
.wpDataTablesWrapper table.wpDataTable td,
.wpDataTablesWrapper table.wpDataTable th,
.wpDataTablesWrapper table.wpDataTable td.numdata,
.wpDataTablesWrapper table.wpDataTable th.numdata
{ text-align: center !important; }
.wpDataTablesWrapper table.wpDataTable th {
line-height: 20px; font-size: 8px !important;
}
.wpDataTablesWrapper table.wpDataTable td {
line-height: 10px; font-size: 9px !important;
}
div.container {
overflow: scroll;
}
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
tbody td:first-child {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
thead th:first-child {
left: 0;
z-index: 1;
}
tbody td:first-child {
left: 0;
z-index: 1;
}
Hello DFSKarma
You can add custom CSS to the columns you want to apply these changes.
For example, add the class "customFont" to a column. Then, you can add new custom CSS, like:
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables