Add outer border to table and shadow

  • Resolved ricmo

    (@ricmo)


    7 years, 10 months ago

    Hello Tobias,

    I’m looking to style my table so it looks like the third table in here: https://powerpackelements.com/demo/table/

    For that, I would like to add a border but only to the entire table and not the cells.
    Also, I was hoping to add a shadow to the header.

    Are both things possible?

    Thank you in advance!

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 10 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    You could e.g. use CSS like

    #tablepress-110-scroll-wrapper {
  box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.75);
}
.tablepress-id-110 {
  margin-bottom: 0;
  border: 1px solid #ff0000;
}

    Regards,
    Tobias

    Thread Starter ricmo

    (@ricmo)

    7 years, 10 months ago

    Thank you for the super fast reply! I tried and the border worked great, but then I tried to apply the border to id-2 in here: https://www.macgamerhq.com/new-mac-games/ (first table)

    It didn’t work:
    #tablepress-2-scroll-wrapper {
    box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.75);
    }

    Did I miss something?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 10 months ago

    Hi,

    that does is not using the horizontal scrolling, so there, you need to use

    .tablepress-id-2 {
  box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.75);
}

    Regards,
    Tobias

    Thread Starter ricmo

    (@ricmo)

    7 years, 10 months ago

    Thanks!
    Hopefully, this will be my last question… Is it possible to only apply the shadow to the header like in the example here? https://imgur.com/a/WLsvcHR

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 10 months ago

    Hi,

    just change the CSS selector to

    .tablepress-id-2 thead {

    Regards,
    Tobias

    Thread Starter ricmo

    (@ricmo)

    7 years, 10 months ago

    Thanks a lot Tobias. I did notice than in my tablepress-id-2, there’s still some sort of white border that is visible when I enable the shadow. I don’t know where that’s coming from…

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 10 months ago

    Hi,

    this is the cell border. To remove it, use

    .tablepress-id-2 thead th {
  border-bottom: none;
}

    By the way: You are already experienced with tables, so you might be interested in learning these things a bit more deeply. I can recommend to try the Developer Tools in your browser (I recommend those from Google Chrome) to investigate things like this.)

    Best wishes,
    Tobias

    Thread Starter ricmo

    (@ricmo)

    7 years, 10 months ago

    I was about to delete my last question because I found the issue. Sorry for wasting your time Tobias.
    And thanks for the help!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 10 months ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Add outer border to table and shadow’ is closed to new replies.