Remove grey frame/ border around whole table

Hi Jana,

thanks for your post, and sorry for the trouble.

What you are seeing there is a so-called “box shadow”. To remove that from all of your tables, please add this code to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

Regards,
Tobias

Hi Tobi,

the code doesn’t seem to work, sorry.

Got it!

I added “!important”-tags:

.tablepress {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}

Now it works ??

Thank you anyway!

Hi,

are you sure? It works just fine for me. I don’t see any more borders/shadows around the table on https://www.streitschlichtung-haintz.de/mediation/

Regards,
Tobias

Hi,

ah, ok. That explains it ?? Yes, those !important tags might be necessary to make this piece of CSS code more important than that of the theme.
Good to hear that it’s working now ??

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Hi Tobias,

Thank you for the great plugin, it’s been easy and pretty intuitive up until just a small issue I can’t seem to solve.

It’s the same issue listed by the previous poster in which a gray background / shadow box appears around the white background table. I tried the previous CSS recommendations from this thread, but they don’t seem to work.

I’d like to simply build a white table without borders with categories for website visitors to click on, without it being obvious there’s a table on the page.

This is currently the CSS I’m using to get the table seen at https://digitalphotographyhobbyist.com/free-photoshop-textures/

.tablepress-id-1 tbody td {
font-family: Arial;
font-size: 20px;
color: #000000;
background-color: #ffffff;
width: 550px;
}

.tablepress {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}

.tablepress-id-1,
.tablepress-id-1 tr,
.tablepress-id-1 tbody td,
.tablepress-id-1 thead th,
.tablepress-id-1 tfoot th {
border: none;
background-color: #ffffff;
}

.tablepress-id-1 {
width: 550px;
margin: 0 auto 1em;
}

.tablepress-id-1 .column-1 {
width: 150px;
}

.tablepress-id-1 .column-2 {
width: 150px;
}

.tablepress-id-1 .column-3 {
width: 150px;
}

Any thoughts would be appreciated.

Ryan

Hi Ryan,

thanks for your post, and sorry for the trouble.

You are affected by a slighlty different problem here. For some reason there are extra <pre> and <code> HTML tags around the table Shortcode code on that page, which need to be removed. For that, please go to the “Edit” screen of the page and switch from the “Visual” to the “Text” editor mode. Then, remove the <pre>, <code>, </pre>, and </code> around the table Shortcode, so that it stands by itself on its own line.

Regards,
Tobias

Hi Tobias,

I have a unique use for TablePress, that is working, but presents the same gray background / shadow box around the table previously mentioned in the support post. In my case, I am using your TablePress to deliver a accordion box that has information that will be periodically updated. I am using your TablePress to deliver the accordion box because the same information appears in more than one post, and I can update the table once and have it update in all locations.

I have put the code shown above in the TablePress custom CSS, which is:

.tablepress {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}

I have looked at the page where I am testing this, within the “Text” edit mode and I do not see any

 or  HTML tags around the table Shortcode code. 

The accordion feature I am using is a part of the theme I am using, which is ChurcHope from Themoholics. I have the information in the table inside this shortcode: [toggle type="gray" title="Study of 1st Samuel" active=""]information goes here[/toggle]

The test page you can look at is: https://newsite.zionsbranch.org/1st-samuel-29-30-31/

Any ideas on what else I can do to remove the gray background / shadow box around the table?

Thank you for taking a look at this!

Rich H.

I don’t know what happened with my previous post, as it put part of my message in a separate box. Weird!

It must have something to do with using the greater than and less than signs around the pre and code, and those words were striped out. The part that got cut out was saying “I do not see any pre or code HTML tags around the table Shortcode.”

Thanks,
Rich

Hi Rich,

thanks for your post, and sorry for the trouble.

Yes, you are right about the box in your post. Those were created by those HTML tags.

Yours is again a different issue. To remove that background and border, please remove the “Custom CSS” that you have now and instead add this:

.tablepress-id-1 tr,
.tablepress-id-1 td {
    border: none !important;
    background: none !important;
    padding: 0;
}

Regards,
Tobias

Hi Tobias,

Thank you so much for your timely response! I must’ve toggled between text and visual and didn’t notice the extra tags. Your advice worked, you’re a life saver!

[ Signature moderated. ]

P.S. I just gave you a positive review, never had follow up that quick for a wordpress issue.

Hi,

you didn’t have any extra tags, actually, so the CSS approach was correct.
And thanks for the review, I really appreciate it!

Best wishes,
Tobias