[Resolved] Problem setting border and color to the HTML table

[Siong Boon Lim]

Hi Tom,

I am current facing some issue using the table features from the
“TinyMCE Advanced” plugin on the following page
http://www.pic-control.com/electronic-product-development/

Cannot seems to align the table to the center.
Cannot set the border to display.

Wondering if GeneratePress allows setting up table?
or is it some other problem that causes this.

Thank you for your help.

[Tom]

Hi there,

This article may help: http://roxeteer.com/table-border-css/

Let me know 🙂

[Siong Boon Lim]

The default theme css is preventing me from setting the border.
Using the code inspector, I can set it.
Which means that I have to edit the css.

Would appreciate advice in this. Am I doing it wrongly?

[Tom]

If you add your custom CSS to your child theme or using another method (check the link in my signature below), it will overwrite the default table CSS with the CSS you want.

[Siong Boon Lim]

Is there any other way without having to overwrite the default css in the generatepress? I just need the table to have border.

[Tom]

Well, either way you’ll need to add your own CSS to give the table a border, because GeneratePress doesn’t do that by default.

The overwriting of the core table CSS isn’t an extra time, and won’t even be noticeable.

Once you add your custom CSS to include the border, it will just show up.

Hope this helps 🙂

[Siong Boon Lim]

Hi Tom,

I thought the setting of table border should be in the HTML?
I still don’t see why it has to be done in the css?

Would appreciate for your advise on this.
Thank you.

[Tom]

You could do it within the table itself – I just prefer using CSS as it will apply to all tables throughout your site, and is much cleaner than styling them individually.

[walshmagger]

Hope this will help you…..HTML Border

Walsh

[Siong Boon Lim]

I have tried this

<table class=”alignleft” style=”border-color: #115533;” border=”1″>

and this

<table border=”5″>

The border does not show up.

I do not need to style, because I only need the border line to show up.
Some table I may not want the border.
That was why I assume it should be simple to do it in HTML.
No matter how I do it, the line don’t show up.

Am I right to say the default css over-write the table border?
The reason why it doesn’t show up.

[Tom]

It shouldn’t – can you link me to the page where you’re trying this so I can see if there’s any CSS overwriting the border value in the table itself?

[Siong Boon Lim]

The link is in my first post.
I have re-post it again here,
http://www.pic-control.com/electronic-product-development/

I was able to make the border show up when I use the code inspector to edit one of the line in the css style.

[Tom]

This may help:

caption, th, td {
    border-color: inherit;
    border-style: solid;
    border-width: 1px;
}

[Siong Boon Lim]

Hi Tom,

The css that you provided does allow the border to be drawn.
The problem is through-out the site, all tables border starts to appear.

Sometimes I am using table for alignment purpose and do not need the table to show its border.

I used to do it in HTML, where if I need border for the table, I can just indicate it in the HTML codes. Seems that this is not possible in Generate Theme.

[Tom]

Give the table a class, like this:

<table class="show-table-border">

Then change the CSS to this:

.show-table-border caption, 
.show-table-border th, 
.show-table-border td {
    border-color: inherit;
    border-style: solid;
    border-width: 1px;
}

This will make it so you can choose which tables will show the border.

[Author]

Posts