Hi,

Can you look into why the padding I have added to my tables with custom CSS is showing/working in the table example in WordPress but not showing on the webpage?

I kind of only get the standard padding on the webpage even if I change it to for instance 50px and the table looks all crazy in the WordPress example.

FYI: It's not an attractive solution for me to use CSS classes as they are removed for each column when there's a change in the header - which we have once a month.

You can see the table on our frontpage.

The table has the following custom CSS:

/* Makes table data cells of last column left border 1px dashed blue */
table.wpDataTable td:nth-child(6) {
    border-left: 1px dashed #113049 !important;
    }
/* Forces blue 2px left border on all other columns */
table.wpDataTable th:nth-child(1),
table.wpDataTable td:nth-child(1),
table.wpDataTable th:nth-child(2),
table.wpDataTable td:nth-child(2),
table.wpDataTable th:nth-child(3),
table.wpDataTable td:nth-child(3),
table.wpDataTable th:nth-child(4),
table.wpDataTable td:nth-child(4),
table.wpDataTable th:nth-child(5),
table.wpDataTable td:nth-child(5),
table.wpDataTable th:nth-child(6) {
    border-left: 2px solid #113049 !important;
    }
/* Forces center in column 2-6 */
table.wpDataTable th:nth-child(2),
table.wpDataTable td:nth-child(2),
table.wpDataTable th:nth-child(3),
table.wpDataTable td:nth-child(3),
table.wpDataTable th:nth-child(4),
table.wpDataTable td:nth-child(4),
table.wpDataTable th:nth-child(5),
table.wpDataTable td:nth-child(5),
table.wpDataTable th:nth-child(6),
table.wpDataTable td:nth-child(6) {
    text-align: center !important;
    }
    
/* Adds padding in all cells - but not working on homepage */   
table.wpDataTable th,
table.wpDataTable td {
    padding-right: 15px !important;
    padding-left: 15px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    }

We have the following custom CSS in the wpDataTables settings. I can't see that it creates any conflicts:

/* Forces Mulish font on all tabel th and td */
table.wpDataTable th, 
table.wpDataTable td {
    font-family: Mulish !important;
}
/* Forces bold font on all th */
table.wpDataTable th {
    font-weight: bold !important;
}
/* Forces blue 2px outer border on all tables */
table.wpDataTable {
    border: 2px solid #113049 !important;
   }
/* Forces blue 2px header bottom-border on all tables */
table.wpDataTable th {
    border-bottom: 2px solid #113049 !important;
}
/* Removes the white frame/padding around all tables */
.wpDataTablesWrapper {
    padding: 0 !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
}
/* Removes the white frame/padding around all tables */
.wpDataTablesWrapper table.wpDataTable {
    margin: 0 auto !important;
    margin-top: 0 auto !important;
    margin-right: 0 auto !important;
    margin-bottom: 0 auto !important;
    margin-left: 0 auto !important;
    width: 100% !important;
    padding: 0 !important;
}
/* Removes wrong blue bottom border on all table headers */
.wpdt-c .wpDataTablesWrapper table.wpDataTable thead th {
    border-bottom: 1px solid #113049 !important;
}
/* Removes top white frame on mobile around all tables */
@media screen and (max-width: 769px)
{.wpdt-c.wdt-skin-aqua .wpDataTablesWrapper div.dt-buttons {
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: none !important;
}}

Best regards,

Morten

Thx Milos!

This is so weird.

It's not not working on the frontpage (table 38) here. But it's working here and here (table 13, 14, 50 and 51).

The CSS below is inserted in the general settings. Makes no difference if I insert in the custom CSS for table 38.

Best,

Morten

/* Sets the desired right, left, top and bottom padding in the chosen desktop tables  */
.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-13 > thead > tr > th,
.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-13 > tbody > tr > td,
.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-14 > thead > tr > th,
.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-14 > tbody > tr > td,
.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-38 > thead > tr > th,
.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-38 > thead > tr > th,
.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-50 > tbody > tr > td,
.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-50 > tbody > tr > td,
.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-51 > thead > tr > th,
.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-51 > tbody > tr > td {
    padding: 15px !important;
}

Hi Milos,

I found out where the CSS comes from...it comes from table 39 which is a table showing the same data but customized for the tablet and mobile version of the site. 

So, table 38 shows on desktop but is hidden on tablet and mobile and table 39 is hidden on desktop but shows on tablet and mobile. 

The difference was that table 39 had the padding CSS in its own custom CSS (because its the only table using that specific padding), whereas all other tables had the padding CSS in the general settings CSS (because more tables share it).

Looks like its working now!! :-)

Thx for the help and effort!! :-)