CSS for table and border

[maddin83]

Hello,

I do have a post where I want to change some layout-details.

Especially:

1. Remove caption from tables
   (it produces a spacing that I don’t want)

2. Remove all borders from tables

I tried following:

.post-247 td, th {
border-width:0;
}

I doesn’t remove all borders. The table-head borders are still visible.
I don’t know how to adress the caption. I tried to move to section to the top with:

caption-side:top;

but nothing changed. Maybe I adressed it incorrectly.

Could you give me some basic rules how to adress the table correctly?
I tried several approaches. Mainly with chrome console to find the correct names.
After several hours I am a little depressed, I thought it would be easier.

Another question:
Do you suggest to make a individual css class for that specific table design and use it in this post by assigning it to the tables?
Could you reference the best way to do this (if recommended).
As far as I understand it should be implemented into the child theme style.css.
I am pretty sure there will be some resources (but I didn’t found them…)

Thank you for your help!!

[maddin83]

Specific post is:
https://scooterundroller.de/city-roller-fuer-erwachsene-das-musst-du-wissen/

[ruenel]

Hello Martin,

Thanks for reaching out.

1.) You should be using the border attribute instead. Therefore, the final code can be:

.post-247 td, 
.post-247 th {
    border:0;
}

2.) If you want the code to be applied to all the tables present on the site, you should be using this table td and place the code in X > Theme Options > CSS.

table td, 
table th {
    border:0;
}

Kindly let us know if this works for you.

[maddin83]

Hello,
thanks for the reply.

That worked fine. Thanks!

I didn’t see the difference between

.post-247 td, th {
border:0;
}

and

.post-247 td,
.post-247 th {
border:0;
}

But obviously my code was wrong.

Second: Do you know how to disable the space below a table?
On the site, it is below the “pro” and “contra”. I don’t want the space to the bullet points to be there.

Thank you!!!

[maddin83]

I’ve done the following:

.post-247 .wp-block-table {
height:40px;
overflow:visible;
margin:0;
}

I am pretty sure it’s bad coding but it helped me. I understand it does the following:
1st: reduce the hight of the table to 40 px
2nd: it removes the scrollbar
3rd: it reduces the spacing

Maybe this helps anyone else too.

@xtheme team: if you know a more secure way to do this, I would be very thankful.

[friech]

Hello Martin,

Yes, there is no difference between this .post-247 td, th and this .post-247 td, .post-247 th it will both target the td and th tag, its just a matter of CSS Specificity, the second one is more specific so it did take effect.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Cheers!