CSS Question – Table Borders

Hi,

thanks for your post, and sorry for the trouble.

The “Extra CSS classes” field is not relevant for this, as it only allows adding CSS classes to tables, but not to cells.

Instead, you will need to use the approach outlined in the TablePress FAQ entry at https://tablepress.org/faq/highlight-cells-or-content/
Instead of changing the background color, as in that example, you’ll want to change the border-left, border-right, border-top, and border-bottom CSS properties as necessary.

Regards,
Tobias

Wow, what a speedy response – thanks!

Now I have a bit of a problem.

I actually want the border on the other tables on the site, so in my custom CSS I’ve written:

.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
	border: 1px solid black;
}

This over-rides the minor changes you suggest above.

Is there a way to make sure the ‘minor’ changes (ie no border on particular cells and rows) overrides the primary code?

Or do I have to specify border code for each and every table on the site?

I guess the final question is, if I want to specify no border for an entire row or entire column, how do I do that?

Sorry for all the questions! I really appreciate the help!

Hi,

just keep that CSS and put the CSS that changes/removes the borders from individual cells below it.
Then, depending on whether you want to remove the border only in certain tables, either use the CSS selector .tablepress-id-123 (where 123 is the table ID), or use .tablepress to make that piece of code affect all tables.

With that, it should actually be enough to use

.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
	border: 1px solid black;
}

to add a border to all cells.

To remove the border for an entire row, you’d then have to remove all left and right borders from the cells, like

.tablepress-id-123 .row-4 td {
  border-left: none;
  border-right: none;
}

For columns, it would be the bottom and top border, like

.tablepress-id-123 .column-4 {
  border-top: none;
  border-bottom: none;
}

(Note that there’s no td at the end of the selector for the columns.)

Regards,
Tobias

Awesome, thanks for all your help Tobias!

For anyone reading this in the future, I wanted to remove the external border lines as well, so my final code at the start (before all the code for removing borders on particular rows/columns etc) is:

.tablepress {
	width: auto;
	margin: 1px;
}

.tablepress tbody td {
	border: 1px solid black;
}

Issue solved – please close the topic!

Hi,

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

Best wishes,
Tobias

Hi Tobias,
I’ve actually gone through all the steps mentioned above, but to no avail. Here’s the page in question.

https://ashevillerealestateteam.com/about-us/scott-russell/

The table is at the bottom of the page and has 3 graphics in it. Just wanting to remove the border. I wonder if I have ‘Super-Strong’ CSS?

Hi,

thanks for your post, and sorry for the trouble.

It’s not “super strong” CSS, but for some reason, your theme has an almost complete copy of the TablePress Default CSS in its “style.css” file, with slightly modified CSS selectors that results in the higher “aggressiveness”.
The easiest fix should therefore be to simply remove that entire block from the style.css (it starts with a comment for “WP Table”). That should remove possible points of interference and should make sure that the “Custom CSS” changes take effect.
Another solution would be to change the priority of the CSS that removes the border, by appending !important after the CSS property value, like

border: none !important;

Regards,
Tobias

Thanks, Tobias. Actually, I meant to say I tried all the steps here:

https://tablepress.org/faq/remove-borders-from-a-table/

Anyway, I just tried the change of priority option as you mentioned above…no luck. I’ll try removing the block of code you mentioned. Thanks,
Scott

Yep…that worked. Thanks!

Hi,

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

Best wishes,
Tobias

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

Hi Tobias,

I?m having a similar problem removing the outer border of a table here: https://www.fualeo.com/countries-languages/. I?ve gone through every thread I can find on this, and tried each of the css suggestions. Here is the css I have in there now. Can you help?

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

Thanks,

Aaron

Hi,

thanks for your post, and sorry for the trouble.

Your theme is adding that border in a weird way, so that you’ll need to use this “Custom CSS”:

.tablepress tbody,
.tablepress td {
    border: none !important;
    padding: 0 !important;
}

Regards,
Tobias

Thanks so much for the reply! I added that, and it?s better, but now there?s a very thin white border. https://www.fualeo.com/our-partners/ it looks like some sort of margin or padding, but both of those are set to 0. So I?m not sure what to do.

Thanks again for your help. You?re the most responsive developer I?ve seen on here.

Aloha,

Aaron

Hi Aaron,

good to hear that this helped already! There’s indeed a very thin white line below the table, and that seems to be a box shadow. To remove that, please also add

.tablepress {
  box-shadow: none;
}

Regards,
Tobias

You?re a lifesaver man. Thanks. Just rated you 5 stars.

Aaron