Remove Table Borders

Hi Tobias,

How can I put all these CSS codes together?

.tablepress-id-4 .row-hover tr:hover td {
	background-color: #ffffff;
}
.tablepress-id-5 .row-hover tr:hover td {
	background-color: #ffffff;
}
.tablepress-id-6 .row-hover tr:hover td {
	background-color: #ffffff;
}
.tablepress-id-7 .row-hover tr:hover td {
	background-color: #ffffff;
}
.tablepress-id-8 .row-hover tr:hover td {
	background-color: #ffffff;
}
.tablepress-id-9 .row-hover tr:hover td {
	background-color: #ffffff;
}
.tablepress-id-10 .row-hover tr:hover td {
	background-color: #ffffff;
}
.tablepress-id-11 .row-hover tr:hover td {
	background-color: #ffffff;
}

I want them to look like this:

#content .tablepress-id-4,
#content .tablepress-id-4 tr,
#content .tablepress-id-4 tbody td,
#content .tablepress-id-4 thead th,
#content .tablepress-id-4 tfoot th {
	border: none;
}

Another question:

If it’s difficult to merge cells in TablePress. Can we show or hide a specific border (up, down, left, right) of a specific cell of a specific table?

Hi,

thanks for your question.

To merge those CSS selectors, you can write them as

.tablepress-id-4 .row-hover tr:hover td,
.tablepress-id-5 .row-hover tr:hover td,
.tablepress-id-6 .row-hover tr:hover td,
.tablepress-id-7 .row-hover tr:hover td,
.tablepress-id-8 .row-hover tr:hover td,
.tablepress-id-9 .row-hover tr:hover td,
.tablepress-id-10 .row-hover tr:hover td,
.tablepress-id-11 .row-hover tr:hover td {
	background-color: #ffffff;
}

If however you want to change this for ALL TablePress tables at once, you can simply use

.tablepress .row-hover tr:hover td {
	background-color: #ffffff;
}

And if you don’t actually want that hover effect (i.e. if your default table color is already white), just uncheck the “Row Highlighting” checkbox on each table’s “Edit” screen.

For your other question: Merging cells is possible with “colspan” and “rowspan” buttons below each table’s input fields. You could also hide indivdual borders with some CSS like

#content .tablepress-id-4 .row-5 .column-3 {
	border-right: none;
}

Regards,
Tobias

Hi,

thanks for your question.

To merge those CSS selectors, you can write them as

.tablepress-id-4 .row-hover tr:hover td,
.tablepress-id-5 .row-hover tr:hover td,
.tablepress-id-6 .row-hover tr:hover td,
.tablepress-id-7 .row-hover tr:hover td,
.tablepress-id-8 .row-hover tr:hover td,
.tablepress-id-9 .row-hover tr:hover td,
.tablepress-id-10 .row-hover tr:hover td,
.tablepress-id-11 .row-hover tr:hover td {
	background-color: #ffffff;
}

If however you want to change this for ALL TablePress tables at once, you can simply use

.tablepress .row-hover tr:hover td {
	background-color: #ffffff;
}

And if you don’t actually want that hover effect (i.e. if your default table color is already white), just uncheck the “Row Highlighting” checkbox on each table’s “Edit” screen.

For your other question: Merging cells is possible with “colspan” and “rowspan” buttons below each table’s input fields. You could also hide indivdual borders with some CSS like

#content .tablepress-id-4 .row-5 .column-3 {
	border-right: none;
}

Regards,
Tobias

Thanks Tobias,

#content .tablepress-id-4 .row-5 .column-3 {
	border-right(or top, bottom,left): none;
}

don’t seem to work. I had to change “none” to “white” or the page background color to make it look what I wanted it to look.

The CSS merge selectors technique worked well, thanks!

And if I may make a suggestion, how do you think if we can align consecutive tables together to achieve the bottom border of the upper table is also the top border of the lower table; and the right border of the upper table is also the left border of the lower table?

Thanks for the great plugin!

Hi,
Checked through CustomCSS for .tablepress-id-N to put my table number in and don’t find it.
Didn’t find anything labled “Plugin Options” for the textarea either.
Think I’m in the right place. Haven’t done much of this work inside and don’t know what I’m looking for or where I’m supposed to put the instructions.
Thank you for your patience and instructions.
Pat

Hi,

@semanticfield:
Good to hear that this helped!
About putting those tables next to each other: That’s kind of tricky, actually. You’d have to move the tables next to each other with some CSS code and then also remove the margin and padding between them.

@pbecker3:
This appies to the TablePress plugin, so you’ll need to go to the “TablePress” entry in the admin menu. There, you’ll see a tab labeled “Plugin Options” at the top. Click that and on the page that opens, you’ll see a big textarea that is named “Custom CSS”.
That’s where the “Custom CSS” (for example that that I posted above) goes.

Regards,
Tobias

Bravo,
Thanks Tobias
Just had to find the right spot to put the code and I’m off to the races again. The table looks great now.
Warm regards,
Pat

Thanks for the help Tobias.

Regards,
Semanticfield

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!