jfbprivate

Sure, here’s an exact copy of the CSS with the borders missing as per the theme’s default:

https://proud-chicken.w5.wpsandbox.pro/tablepress/

Thanks for looking into it.

Hi Tobias,

I’ve recreated the whole CSS from scratch and figured it out for the most part. However, this issue still remains:

“But there’s one last issue—and my theme is partly to blame for it: I’d like to enable the first and last row borders of my table which are disabled by default. I saw that they’re usually there in the regular WordPress themes. How can I activate them without ruining the above feature again?”

Any ideas?

Thanks.

PS: I think I know what’s causing the 1px jump. I just realized the whole table jumps down by one pixel. It’s probably because it’s expecting a top border above the first row, which isn’t there. The same applies to the last row: The “Edit” button also jumps down by one pixel when hovering over it. But that border is also missing—it only appears on hovering. So I somehow need to enable those.

You know what, never mind. I don’t need to understand everything. It’s working for me now, like this:

.tablepress tbody td {
border-color: #e5e5e5;
}

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

.tablepress tr:hover td {
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid #f8f8f8;
}

[The only confusing thing remaining: What’s the difference between “.tablepress .row-hover tr:hover td” and “.tablepress tr:hover td”? There seems to be one anyway, because when I copy the border information into the first element (with the “.row-hover”), the first row of the table would jump down by one pixel on hover, which it doesn’t do when I leave it in the second element (without the “.row-hover”).]

For it to work properly, I cannot enter any border values in the “.tablepress tbody td” other than “border-color.” Any additional information is exactly what’s causing the top border to not respond. So I left it out entirely. It doesn’t seem necessary anyway.

So far, so good . . .

But there’s one last issue—and my theme is partly to blame for it: I’d like to enable the first and last row borders of my table which are disabled by default. I saw that they’re usually there in the regular WordPress themes. How can I activate them without ruining the above feature again?

Yeah, apologies for the mess, and thank you.

I’ll be back with some more questions and ideas (and a donation for that matter) before I’m all set and good to go.

You see, what I mean is, both ways work—with and without the “border-top”-part.

This one:

.tablepress tr:hover td {
border-top: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
}

As well as this:

.tablepress tr:hover td {
border-bottom: 1px solid #ff0000;
}

So what I’m trying to understand is whether the top border of a row is actually the bottom border of the preceding row, or the other way around.

Now there’s an inconsistency in what you posted:

The first one was:

.tablepress tr:hover td {
border-top: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
}

The second one was:

.tablepress tbody td {
border-color: #e5e5e5;
}

.tablepress tbody tr:hover td {
border-color: #ff0000;
border-bottom: 1px solid #ff0000;
}

You left out the top border in the second post (it still works though), and instead of “.tablepress tr:hover td” you wrote “.tablepress tbody tr:hover td.”

Does that have any effect?

Wait, does that mean there’s no attribute for the top border at all? Is that how table borders work—only the bottom border needs a value? Because that is the one part I don’t really understand: It seems a row doesn’t actually “owns” two borders as both the preceding and the subsequent row share the same one, respectively. It’s a bit confusing.

Another thing: The code doesn’t affect the header in this example. The border bottom of the header remains gray. Can I add a line for that too, and will that also change the top border of the header?

If I use this bit of code you posted, I also get it to work. However, when I implement it into my table, it doesn’t do the trick anymore.

I will probably have to create the CSS from scratch and see at what point exactly it stars failing to work. That seems to be the only way to find out what’s causing this.

Thanks again.

Yes I did, and it saved me a lot of time and trouble. Thank you!

Yeah and also the link is broken. For whatever reason the table is now here:

https://hungry-millipede.w6.poopy.life/table/

Poopy life. Right. ??

Yeah I did, I created an extra element just for tr. Still nothing. I pasted the code into the plugin options and refreshed the site again. You might wanna take a look.

I’m sure there’s plenty of unnecessary code in there too, but I’m only in the early stages. Maybe some weird line is intervening with the command. I admit I’m having a hard time focusing today . . .

Thanks again.

Oh I see. The “Note that for this work, there should not be a border on the tr element.”-part and the “top border not changing its color”-issue are probably related.

I got it to work once, though—and I’m sure it was without removing the border attributes from the tr line. I wonder how I did it though. I had to revert it because of another issue and I didn’t save it. Now I can’t reproduce it.

Thanks.

I kinda managed to implement it into my original table, but only the bottom border changes—the top border remains.

The code you gave me behaves that way too: Only the bottom border changes to red.

I also don’t understand what you mean by “Note that for this work, there should not be a border on the tr element.” If I remove the border attributes from the following part of the code, the very first top border is being removed, too.

.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
background-color: #ffffff;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
border-left: none;
border-right: none;
font-family: Helvetica;
font-size: 14px;
font-weight: lighter;
color: #4d4d4d;
}

Am I missing something obvious? Probably.

Hi Tobias,

Thank you for looking into it.

Unfortunately I can’t, however, I just set up a SandBox example real quick that’d be enough to showcase what I’m talking about.

Now what I’m trying to attempt here is to change the color of the top and bottom line to the background color of the row.

https://hungry-millipede.w6.wpsandbox.pro/table/

Thanks again.

I just found a similar question in the forums—even though I was searching for it earlier with no results . . . Sorry for the unnecessary post . . .

My original post is on hold for moderation for whatever reason. So here it is again. It refers to the link I posted:

That’s the part that doesn’t make sense, and I can’t even tell what you mean (edit them and link?).

By that I meant Dashboard > Pages > Quick Edit: Link the child page to the parent page (see second illustration in the linked website below).

When you are in the Menu creation (either the admin page or in Customizer), you can create a Custom link with whatever value you want. To put a Page under it (as submenu), add the child page to the menu and drag it to the desired location (and indentation).

I know I can create a custom link from both the admin page and the customizer—and it shows up in Dashboard > Appearance > Menus. But I can’t put any pages under it. That’s the funny part: I can’t do that anymore. I can’t even create child pages in the first place.

The only page attributes I can set when creating a new page is the template (default, full-width, or grid)—the “parent” part is gone (see first illustration in the linked website below).

But even I could, custom links don’t show up as an option for a parent page anymore. And they used to—even in Dashboard > Pages. They would show just like any other pages too. I could just go into the appropriate child page quick edit and set the parent page. Just like that. Now there is no way to do any of these steps.

That’s the whole issue here. I hope you’re getting what I’m trying to say here.