Table Border and Shadow

Hi,

thanks for your question, and sorry for the trouble.

The problem here is that the table is already at 100% width, and that the box shadow is then cut off from the outside container.
You could try reducing the table width a little bit:

.dataTables_wrapper .tablepress-id-1 {
    width: calc(100% - 10px) !important;
    margin: 0 auto !important;
}

Regards,
Tobias

Hi thanks for the quick response.

That worked for the shadow, however on the top of the table it seems to have no shadow – refer link https://bit.ly/2VOBPG3

Also the border-radius doesnt change, still has square edges.

Hi,

ah, sorry, I missed that part. Unfortunately, giving tables round corners is a bit more tricky. You could maybe use this approach (adjusted to the correct CSS classes): https://codepen.io/mlms13/pen/CGgLF

Regards,
Tobias

Thanks for that. Back on the border. The shadow appears but not on the top border. Do you know why this would be the case?

Also how can you remove the border for the column filter widgets? I just want a shadow on those.

Hi,

you might have to add a top and bottom margin:

margin: 10px auto !important;

instead of

margin: 0 auto !important;

Regards,
Tobias

got it worked thanks and lastly how can you remove the borders for the column filter widgets? I just want a shadow on those.

Hi,

please try

.column-filter-widget select {
    border: none;
}

You might also want to check out working with the Developer Tools in your browser (I recommend those from Chrome). These allow you test all this live.

Regards,
Tobias