Table Border and Shadow

  • Resolved amanfre

    (@amanfre)


    5 years, 8 months ago

    Hi Tobias,

    Am trying to add a border to my table of 5px all around along with a shadow with a blur of 5px.

    I’ve tried the following which CSS with no luck;

    .tablepress-id-1 {
    border: 1px solid #e2e2e2;
    border-radius: 5px 5px 5px 5px;
    }
    .tablepress-id-1 {
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.12);
    }

    The border-radius doesnt change and the shadow doesn’t work all the way around.

    Refer link for reference

    https://bit.ly/2GZM3zY

    Cheers

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    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

    Thread Starter amanfre

    (@amanfre)

    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.

    Plugin Author TobiasBg

    (@tobiasbg)

    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

    Thread Starter amanfre

    (@amanfre)

    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.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    you might have to add a top and bottom margin:

    margin: 10px auto !important;

    instead of

    margin: 0 auto !important;

    Regards,
    Tobias

    Thread Starter amanfre

    (@amanfre)

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

    Plugin Author TobiasBg

    (@tobiasbg)

    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Table Border and Shadow’ is closed to new replies.